【发布时间】：2021-03-13 05:58:15
【问题描述】：
我正在学习使用 Canvas Html5 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 - 仍然没有运气。我也尝试过小书签。这是试错的第 3 天！
请帮助我觉得这可以实现，只需要更聪明的人洞察力
【问题讨论】：
-
你可以将你的绘图代码包装在一个函数中，然后从控制台调用该函数
-
嗯，你问如何对谷歌进行 XSS 攻击？
-
@reece 你能不能用代码回答，因为我不确定这如何解决我的问题。
-
@toHo 我是这个东西的新手，你有其他选择吗？谢谢
标签： javascript python html css selenium