js实现注入
使用 JavaScript 实现注入的方法
DOM 注入
通过动态创建或修改 DOM 元素实现内容注入。例如，向页面添加一个新的 <div> 元素：
const newElement = document.createElement('div');
newElement.innerHTML = '注入的内容';
document.body.appendChild(newElement);脚本注入
动态加载外部 JavaScript 文件或直接执行代码：
const script = document.createElement('script');
script.src = 'https://example.com/external.js';
document.head.appendChild(script);事件监听注入
通过覆盖或添加事件监听器实现行为注入：
document.getElementById('target').addEventListener('click', () => {
console.log('注入的事件处理逻辑');
});CSS 样式注入
动态添加样式规则改变页面表现：
const style = document.createElement('style');
style.innerHTML = 'body { background-color: red; }';
document.head.appendChild(style);数据劫持
通过重写原生方法拦截数据：
const originalFetch = window.fetch;
window.fetch = function(url, options) {
console.log('拦截请求:', url);
return originalFetch(url, options);
};注意事项
- 注入操作需遵守同源策略，跨域访问可能被浏览器阻止
- 过度注入可能影响页面性能或导致冲突
- 某些注入技术可能被安全策略（如CSP）阻止
- 实际应用中需考虑代码的兼容性和执行时机
典型应用场景
- 浏览器插件开发
- 页面功能增强
- 调试和分析工具
- A/B测试框架
