当前位置：首页 > 行业动态 > 正文

如何有效防范ContentJS注入攻击？

ContentJS 注入是一种技术，通过它开发者可以在网页中动态地插入 JavaScript 代码或脚本，以增强网页的功能或实现特定的效果。

Content JS注入是一种在网页中插入JavaScript代码的方法，通常用于扩展浏览器功能或修改网页内容，这种技术广泛应用于Chrome扩展程序开发中，通过manifest.json文件声明或动态注入的方式实现。

如何有效防范ContentJS注入攻击？ 第1张

以下是关于Content JS注入的详细解释：

1、基本概念

Content Scripts：运行在Web页面的上下文中的JavaScript文件，可以通过标准DOM操作来读取和修改当前访问的Web页面的内容。

隔离环境（Isolated World）：Content Scripts在一个特殊的隔离环境中执行，无法直接访问Web页面自带的JavaScript变量和函数，反之亦然。

2、注入方式

静态声明：通过在manifest.json文件中声明content_scripts来实现，这种方式适用于需要对特定网页进行固定脚本注入的场景。

     {
       "content_scripts": [
         {
           "matches": ["http://www.google.com/*"],
           "js": ["jquery.js", "myscript.js"]
         }
       ]
     }

属性说明如下：

名称 类型 必选/可选 说明
matches string数组 必选 Content Script注入的Web页面
exclude_matches string数组 可选 Content Script不注入的Web页面
include_globs string数组 可选 对于matches匹配的Web页面，进一步限定URL
exclude_globs string数组 可选 对于matches匹配的Web页面，进一步排除URL
match_about_blank boolean 可选 是否注入Content Script到about:blank和about:srcdoc页面，默认false
css string数组 可选 注入到匹配的Web页面中的CSS文件，顺序相关
js string数组 可选 注入到匹配的Web页面中的JS文件，顺序相关
run_at string 可选 控制JS文件注入的时机，如”document_start”, “document_end”, “document_idle”，默认”document_idle”

“document_start”表示在CSS文件之后，DOM构建或其他脚本运行之前，注入JS文件。

“document_end”,表示在DOM构建结束之后，图片或框架加载之前，注入JS文件。

“document_idle”表示在”document_end”与触发window.onload事件之间的某个时间，注入JS文件，具体时间可以根据页面的内容和加载的进度优化。
all_frames boolean 可选 控制JS文件是否在匹配的Web页面中的所有框架中运行，默认false表示只在顶层框架中运行

动态声明：通过编程方式在事件发生时动态注入Content Scripts，这种方式适用于需要根据用户交互或其他条件有选择地注入脚本的情况。

     chrome.browserAction.onClicked.addListener(function(tab) {
       chrome.tabs.executeScript({
         code: 'document.body.style.backgroundColor="red"'
       });
     });

3、使用限制

无法访问某些API：Content Scripts不能直接访问chrome.* API，如chrome.extension、chrome.i18n、chrome.runtime等。

独立运行：每个Content Script彼此独立运行，互不干扰。

4、通信机制

消息传递：虽然Content Scripts不能直接访问chrome.* API，但可以通过Chrome的消息传递机制间接调用这些API。

     // Content Script发送消息
     window.postMessage({type: "inject_message_type", message:"要向content script发送的消息"}, '*');
     // 监听注入脚本发送的消息
     window.addEventListener('message', (e) => {
       if (e && e.data && e.data.type === 'inject_message_type') {
         // TODO LIST
       }
     });

5、安全性考虑

跨域请求：Content Scripts通过跨域XMLHttpRequest对象获取第三方结果时，需注意脚本注入攻击。

权限声明：动态注入Content Scripts需要在manifest.json文件中声明必要的权限。

     {
       "permissions": [
         "tabs",
         "http://www.google.com/*" //要注入Content Scripts的Web页面所在的域
       ],
     }

6、示例代码

   <!-create node for user interface -->
   <div id="newNode"></div>
   <script>
     var newNode = document.createElement('div');
     newNode.innerHTML =<button id="A">a</button>;
     // inject new node
     var targetNode = document.querySelector('...');
     targetNode.parentNode.insertBefore(newNode, targetNode);
     // bind events
     document.getElementById("A").onclick = () => {
       alert('1');
     };
   </script>

相关问答FAQs：

Q1：为什么点击按钮无法触发弹窗？

A1：因为Content Scripts与Web页面的JavaScript环境是隔离的，无法直接调用Web页面中的函数或变量，解决方案是通过共享DOM或消息传递机制进行通信。

Q2：如何通过Content Scripts访问扩展中的其他文件？

A2：可以使用chrome.extension.getURL()方法读取准备好的JS文件，然后通过动态加载JS的方式注入到原网页中。

function addJs() {
  var file = chrome.extension.getURL('js/inject/drag.js');
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = file;
  document.documentElement.appendChild(s);
}

小编有话说

Content JS注入是一项强大的技术，可以极大地扩展浏览器的功能和用户体验，由于其运行在隔离环境中，开发者需要特别注意与Web页面的通信和权限管理，通过合理利用消息传递机制和动态加载JS文件，可以有效解决Content Scripts的限制问题，实现更复杂的功能，希望本文能帮助大家更好地理解和应用Content JS注入技术。

ContentJS注入安全策略防范措施
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/393559.html
0

相关文章