控制台显示有关内容安全策略和许多失败的GET请求的错误
我实际上正在研究我的第一个Chrome扩展， 即使它运行平稳，我从我用来检索一些数据和关于代码的安全性恼人的错误get()函数有很多错误。
以下是控制台日志的屏幕截图 ： 
以下是涉及的代码：
popup.html
<!doctype html> <html> <head> <title>NGI Little Helper - Subscribes</title> <link rel="stylesheet" href="popup.css"> <!-- JavaScript and HTML must be in separate files for security. --> <script type="text/javascript" src="common/jquery.js"></script> <script type="text/javascript" src="popup.js"></script> </head> <body> <h1>Topics</h1> <div id="content">..:: Loading ::..</div> </body> </html>
popup.js
这个脚本开始制作一个$.get()到一个远程网页。 variablesdata的内容可以在这里find
$.get("http://gaming.ngi.it/subscription.php?do=viewsubscription", function(data) { var TDs = $('td[id*="td_threadtitle_"]', data); $(document).ready(function() { $("#content").html("<br/>"); $.each( TDs, function() { //Removes useless elements from the source $('img[src="images/misc/tag.png"]', this).remove(); $('span', this).remove(); //$('span[class="smallfont"]', this).remove(); $('div[class="smallfont"]', this).remove(); $('img[src="images/buttons/firstnew.gif"]', this).attr('src', '/img/icons/comment.gif'); $('a[style="font-weight:bold"]', this).removeAttr("style"); //Modify the lenght of the strings if ($("a[id^='thread_title_']", this).text().length > 35) { $("a[id^='thread_title_']", this).text( $("a[id^='thread_title_']", this).text().substring(0, 30) + " [...]" ); } //Modify the URL from relative to absolute and add the target="_newtab" $("a[id^='thread_']", this).attr('href', "http://gaming.ngi.it/"+ $("a[id^='thread_']", this).attr('href')); $("a[id^='thread_']", this).attr('target', "_newtab"); //Send the HTML modified to the popup window $("#content").html($("#content").html() + $('div', this).wrap("<span></span>").parent().html() +"<br/>" ); }); }); });
在这里你可以find所有从jquery操作后的HTML。
老实说，我不明白为什么会出现这些错误，特别是与安全有关的错误。 我没有在popup.html中使用任何内联代码。
的manifest.json
{ "name": "NGI Little Helper", "version": "0.8.5", "manifest_version": 2, "description": "Extension per gli Utenti del forum gaming.ngi.it", "options_page": "fancy-settings/source/index.html", "background": { "page": "background.html" }, "icons": { "16": "img/logo16.png", "48": "img/logo48.png", "128": "img/logo128.png" }, "content_scripts": [{ "matches": ["*://gaming.ngi.it/*"], "js": ["common/jquery.js", "logo_changer/logo_change.js"], "run_at": "document_start" }], "browser_action": { "default_icon": "img/icon.png", "default_popup": "popup.html", "default_title": "Visualizza Subscriptions" }, "permissions": [ "*://gaming.ngi.it/*" ] }
以下是一段HTML代码，将在所有操作之后呈现在popup窗口中。 所有的div都与这个相似，只是url的变化而已：
<div> <a href="http://gaming.ngi.it/showthread.php?goto=newpost&t=555954" id="thread_gotonew_555954" target="_newtab"><img class="inlineimg" src="/img/icons/comment.gif" alt="Go to first new post" border="0"></a> <a href="http://gaming.ngi.it/showthread.php?goto=newpost&t=555954" id="thread_title_555954" target="_newtab">[All Gamez] [Frozen Synapse] S [...]</a> </div>
如果需要，我可以提供完整的源代码。
让我们从最简单的问题开始：
拒绝执行内联脚本，因为…
$('div', this)select<td>所有<div>元素。 在您提供的源代码中 ，可以find以下事件处理程序：
<div class =“smallfont”>
<span style =“cursor：pointer” onclick =“window.open（'member.php？u = 47995'，'_self'）” > K4raMong </ span>
</ DIV>
通过默认的内容安全策略 ，这是被禁止的。 为了摆脱这个错误，只需在将属性插入到文档中之前删除该属性即可：
element.removeAttribute('onclick'); // in jQuery: $element.removeAttr('onclick');
为什么这些图片加载？ 我没有把它们放在文件中
在jQuery / JavaScript可以操作DOM之前，必须先parsing它。 在你的代码中，这个工作隐式地在var TDs = $(.., data) 。 线。 这个parsing大致等于：
var dummy = document.createElement('div'); // Container dummy.innerHTML = data;
曾经听说过预加载图像？ 这是一个caching图像的有用function，以便在需要时进行准备。 这可以使用(new Image).src='...'; 。 创build的<img>元素不必插入到文档中。
在你的情况下，这是不受欢迎的行为，因为这些图像在你的扩展中查找。 这是由于你的网页使用了相对的URL而不是绝对的URL 。 使用相对URL时，资源的预期位置取决于当前文档的位置。
如何解决它
不要使用jQuery 。 由于您正在编写Chrome扩展程序，因此您无需担心跨浏览器的兼容性问题。 jQuery使用innerHTML技巧来parsingHTML，失败了，正如我以前所示。
JavaScript有DOMParser对象，自Chrome 30以来，可以按如下方式使用：
var doc = (new DOMParser).parseFromString(data, 'text/html');
您可以使用responseType属性跳过从string到文档的手动转换，如下所示。
到达解决scheme
如您所知，只要URL正确添加到清单文件中的permissions部分，就可以在Chrome扩展程序中使用跨网站请求。 我们将使用XMLHttpRequest级别2中引入的function，即responseType属性 。
// Fetching data var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://gaming.ngi.it/subscription.php?do=viewsubscription'); xhr.onload = function() { var doc = xhr.response; // Now, you can use jQuery, since the string has been parsed. ... }; xhr.responseType = 'document'; // Chrome 18+ xhr.send();
您可以轻松地重写您的代码，以使用本机DOM和JavaScript而不是jQuery。 大多数使用jQuery的select器引擎，但大多数情况下，它也可以使用element.querySelectorAll实现。 使用var doc = xhr.response;获取文档后var doc = xhr.response; ，请执行以下操作：
var TDs = doc.querySelectorAll('td[id*="td_threadtitle_"]'); var html = ''; [].forEach.call(TDs, function(td) { // etc, etc. Do your job });
你看到var html = ''; ？ 无论您是否使用jQuery，这都是很好的做法。 永远不要做element.innerHTML += ...; 甚至更糟$element.html($element.html() + ...); 在一个循环中。 浏览器将不得不一遍又一遍地渲染，而且，用户注意到性能下降。
