在任何网站上绘图（不带扩展）？将HTML/CSS/JS注入任何网站

2024-05-29 06:29:26 发布

您现在位置：Python中文网/ 问答频道 /正文
768 3

我正在学习使用CanvasHtml5 canvas paint在本地网页上绘制形状的教程

这一切都很好，但我想复制相关的绘图功能/CSS/HTML，并将其“注入”到任何网站的源代码中，以便能够在任何网站上绘制矩形/线条。但是我被卡住了。代码如下：

from json import dumps
import time

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager

URL = "https://www.google.com/"

options = webdriver.ChromeOptions()
options.add_experimental_option('excludeSwitches', ['enable-logging'])
options.headless = False
options.add_argument("--start-maximized")

driver = webdriver.Chrome(
    options=options, executable_path=ChromeDriverManager(log_level=0).install()
    )
driver.get(URL)

# HTML from `<head>` inject style code to existing head style tag
html_head = driver.find_element_by_tag_name("head") # Find the head
html_head_style= html_head.find_element_by_tag_name("style") # Within the head, find the style
inner_html_style = html_head_style.get_property("innerHTML") # Get the styles innerHTML
# Add properties for eventual canvas
new_style = inner_html_style + "#imageView {position:absolute;top:0;left:0;border: 10px solid #000;}"  

# Add canvas style to existing style string as a string
driver.execute_script("document.getElementsByTagName('style')[0].innerHTML =" +  dumps(new_style)) #  Inject new_style into the script tag!

# HTML from `<body>`
html_body = driver.find_element_by_tag_name("body") # find the body
location = html_body.location # Get body lcoation
height = driver.execute_script("return document.body.scrollHeight") # Get body height
width = driver.execute_script("return document.body.scrollWidth") # Get body width

# add canvas to body
new_body = html_body.get_attribute('innerHTML') + f'<canvas id="imageView" width="{width}" height="{height}"></canvas>'
driver.execute_script("document.body.innerHTML =" + dumps(new_body))

# Not working from here on out

js = """
`
<script>/* © 2009 ROBO Design
            * http://www.robodesign.ro
            */
           
           // Keep everything in anonymous function, called on window load.
           if(window.addEventListener) {
           window.addEventListener('load', function () {
             var canvas, context;
           
             // Initialization sequence.
             function init () {
               // Find the canvas element.
               canvas = document.getElementById('imageView');
               if (!canvas) {
                 alert('Error: I cannot find the canvas element!');
                 return;
               }
           
               if (!canvas.getContext) {
                 alert('Error: no canvas.getConmtext!');
                 return;
               }
           
               // Get the 2D canvas context.
               context = canvas.getContext('2d');
               if (!context) {
                 alert('Error: failed to getContext!');
                 return;
               }
           
               // Attach the mousemove event handler.
               canvas.addEventListener('mousemove', ev_mousemove, false);
             }
           
             // The mousemove event handler.
             var started = false;
             function ev_mousemove (ev) {
               var x, y;
           
               // Get the mouse position relative to the canvas element.
               if (ev.layerX || ev.layerX == 0) { // Firefox
                 x = ev.layerX;
                 y = ev.layerY;
               } else if (ev.offsetX || ev.offsetX == 0) { // Opera
                 x = ev.offsetX;
                 y = ev.offsetY;
               }
           
               // The event handler works like a drawing pencil which tracks the mouse 
               // movements. We start drawing a path made up of lines.
               if (!started) {
                 context.beginPath();
                 context.moveTo(x, y);
                 started = true;
               } else {
                 context.lineTo(x, y);
                 context.stroke();
               }
             }
           
             init();
           }, false); }
           
           // vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:
           </script>
`
"""


# Tried the below code via debugger no luck
'''
driver.execute_script("document.body.innerHTML += " + dumps(js))
driver.execute_script("debugger;")
driver.refresh()
'''

我一直在使用google作为我的测试站点。现在我已经成功地“注入”了一块画布，我可以通过谷歌周围新的黑色边框看到它

但我在javascript上崩溃了。我意识到我不能注入我自己的预制JS文件，所以我尝试直接在脚本标记之间注入JS函数（如代码“JS”变量）。然后我意识到，如果注入JS，它将不会运行，它需要在页面加载时（也称为刷新）在那里，但注入的文件在刷新时丢失。然后我尝试使用断点和调试在页面上“保存和刷新”我的JS，但仍然没有成功。我也尝试了bookmarklet。这是第三天的尝试和错误

请帮助我，我觉得这是可以做到的，只是需要更聪明的人洞察


Tags： thefromifstylehtmldrivercontextscript
1条回答
网友
1楼 · 发布于 2024-05-29 06:29:26

@opticMan通常是浏览器世界中的“好人”，他们会尽一切可能禁止在其网站上执行第三方脚本。它被称为XSS，您可以阅读更多here

如果你想操纵任何你想要的网站，你需要使用浏览器扩展来控制它。如果只是想学习和实验，尝试将代码注入到您自己控制的网站（可能是使用nodejs和express的简单开发服务器）

相关问题 更多 >

    编程相关推荐

    热门问题