CLIを介したWebアセットのリスト

CLIを介したWebアセットのリスト

ブラウザを使用してWebページを閲覧するときにページのコードをダウンロードした後、ブラウザはすべてのリソース(CSS、JS、および画像)をダウンロードします。

ページ資産(内部および外部資産)のすべてのURLを一覧表示する方法はありますか?

アイデアは、外部と内部の資産の変化を監視することです。

答え1

私はあなたが望むことができるPythonスクリプトを書いています:

#!/usr/bin/env python2
# -*- coding: ascii -*-
"""list_assets.py"""

from bs4 import BeautifulSoup
import urllib
import sys
import jsbeautifier
import copy

# Define a function to format script and style elements
def formatted_element(element):

    # Copy the element
    formatted_element = copy.copy(element)

    # Get beautified element text
    formatted_text = jsbeautifier.beautify(formatted_element.text)

    # Indent all of the text
    formatted_text = "\n".join(["    " + line for line in formatted_text.splitlines()])

    # Update the script body
    formatted_element.string = "\n" + formatted_text + "\n    "

    # Return the beautified element
    return(formatted_element)

# Load HTML from a web page
html = urllib.urlopen(sys.argv[1]).read()

# Parse the HTML
soup = BeautifulSoup(html, "html.parser")

# Extract the list of external image URLs
image_urls = [image['src'] for image in soup.findAll('img') if image.has_attr('src')]

# Extract the list of external CSS URLs
css_urls = [link['href'] for link in soup.findAll('link') if link.has_attr('href')]

# Extract the list of external JavaScript URLs
script_urls = [script['src'] for script in soup.findAll('script') if script.has_attr('src')]

# Extract the list of internal CSS elements
styles = [formatted_element(style) for style in soup.findAll('style')]

# Extract the list of internal scripts
scripts = [formatted_element(script) for script in soup.findAll('script') if not script.has_attr('src')]


# Print the results

print("Images:\n")
for image_url in image_urls:
    print("    %s\n" % image_url)
print("")

print("External Style-Sheets:\n")
for css_url in css_urls:
    print("    %s\n" % css_url)
print("")

print("External Scripts:\n")
for script_url in script_urls:
    print("    %s\n" % script_url)
print("")

print("Internal Style-Sheets:\n")
for style in styles:
    print("    %s\n" % style)
print("")

print("Internal Scripts:\n")
for script in scripts:
    print("    %s\n" % script)

私が使用する(主な)パッケージは次のとおりです。

スクリプトは、外部リソースのURLと内部リソースの要素タグ自体(仮定化/美化を含む)を印刷します。簡単に変更または改善できる結果の書式設定方法について、インスタントスタイルを選択しました。

実際には、次のHTMLファイルの例(assets.html)を参照してください。

<!doctype html>
<html lang=en>

<head>

    <meta charset=utf-8>

    <title>assets.html</title>

    <link rel="stylesheet" type="text/css" href="mystyle.css">

    <style>
    body {
            background-color: linen;
    }

    h1 {
            color: maroon;
                    margin-left: 40px;
    } 
    </style>

    <script src="myscripts.js"></script>

</head>

<body>

    <script>alert( 'Hello, world!' );</script>

    <img src="https://www.python.org/static/community_logos/python-logo.png">

    <p>I'm the content</p>

</body>

</html>

ローカルファイルからスクリプトを実行する方法は次のとおりです。

python list_assets.py assets.html

出力は次のとおりです。

Images:

    https://www.python.org/static/community_logos/python-logo.png


External Style-Sheets:

    mystyle.css


External Scripts:

    myscripts.js


Internal Style-Sheets:

    <style>
    body {
        background - color: linen;
    }

    h1 {
        color: maroon;
        margin - left: 40 px;
    }
    </style>


Internal Scripts:

    <script>
    alert('Hello, world!');
    </script>

最後に、あなたに役立つ参考資料として使用するいくつかの記事は次のとおりです。

関連情報