JavaScript注入和书签有啥区别吗？

Posted 2023-02-19

【中文标题】JavaScript注入和书签有啥区别吗？

【英文标题】：Is there any difference in JavaScript injection and bookmarklet?JavaScript注入和书签有什么区别吗？

【发布时间】：2013-11-25 20:08:21

【问题描述】：

根据关于 Bookmarklets (http://en.wikipedia.org/wiki/Bookmarklet) 的***文章，Bookmarklets 的概念是：

Web 浏览器使用 URI 作为标签的 href 属性和 书签。 URI 方案，例如 http:、file: 或 ftp:，指定 其余字符串的协议和格式。浏览器也 实现一个前缀 javascript: 解析器就像任何其他的一样 URI。在内部，浏览器看到指定的协议是 javascript，将字符串的其余部分视为 JavaScript 应用程序 然后执行，并使用结果字符串作为新的 页面。

它表示将生成的字符串用作新页面。那么这是否意味着浏览器拥有的原始 DOM 不受该字符串的影响？但是，如果 only 将结果字符串用作新页面，我如何在现有 DOM 中更改或注入新的 DOM 元素？因为警告 Hello 或注入一些新的 DOM 元素的脚本并没有真正返回任何内容。他们在现有的 DOM 上工作。

现在，在 Internet Explorer 中，除了使用 Bookmarklets 在页面上执行一些 JavaScript 之外，我还可以编写一个 BHO 插件并通过以下方式注入：

        document = (htmlDocument)webBrowser.Document; 
        var injectedJS = System.IO.File.ReadAllText("InjectedJS.js");
        var window = document.parentWindow;
        window.execScript("(function() " + injectedJS + " )()");

类似地在 chrome 中，我可以写一个扩展来实现同样的事情：

var s = document.createElement('script');
s.src = chrome.extension.getURL("script.js");
s.onload = function() 
    this.parentNode.removeChild(this);
;
(document.head||document.documentElement).appendChild(s);

这些有何不同？ 我的高级问题是：

这三种方法是否在不同的环境中执行 JavaScript 代码？ 其中一个是否存在其他一个没有的限制？ 执行结果呈现给用户或反映在浏览器中的方式有​​什么不同吗？ “JavaScript 注入”和“书签”这两个术语有什么区别吗？虽然我相信 JavaScript 注入是一种效果，而 Bookmarklets 是实现它的一种方式，但 BHO 和 Chrome 扩展是另一种方式。 如果 4 中的假设是正确的，那么使用 BHO 的 execScript 方法或在浏览器中使用 javascript: 协议执行 JavaScript 的方式有什么不同吗？

【问题讨论】：

不是一个“真正的”答案（例如，不知道 BHO），只是一个评论： 1. 不是真的（在 Chrome Ext. 中注入脚本的代码在隔离的环境中运行，但注入的脚本在网页 JS 上下文中运行）。 2. 分机。功能强大得多（并且可以访问许多其他 API 和功能）。书签更简单（并且跨浏览器更便携）。 3. 如果你按照上面描述的方式实现它，可能不是，而是一个 Ext。可能会有所不同 4. 根据上下文，这些术语可能具有不同的含义，但您的总体思路是对的 5. 不知道

【参考方案1】：

1。这三种方式在不同环境下执行javascript代码吗？

所有这三个方法都在页面上下文中执行 JavaScript 代码。将这些方法相互比较，可以说JavaScript代码是在同一个环境中执行的。

内容脚本（Chrome/Opera/Firefox/Safari）在与网页隔离的环境中运行，因此从这个角度来看，环境确实不同。 BHO 有点不同，因为与其他扩展平台不同，扩展的语言不是 JavaScript，而是 C++、C#、... JavaScript 代码不能直接访问 BHO 的本机代码（除非你自己实现这样的东西），所以环境当然是“不同的”。

2。其中一个有没有其他一个没有的限制？

书签是javascript:... URL，仅此而已。浏览器扩展可以直接执行跨域 HTTP 请求，访问持久的站点无关存储等。如果你想在一个小书签中获得类似的功能，你需要使用外部 Web 服务。

只有在用户手动激活书签时，它们才能处于活动状态。这是优点还是缺点取决于您的情况。

书签的最大尺寸受maximum URL length 的限制，它相当小。可以通过在文档中插入<script src> 标记来规避此限制。脚本必须先加载，所以代码的执行会延迟。

Bookmarklet 几乎可以在所有网络浏览器中使用，包括手机和平板电脑上的浏览器（Chrome 扩展程序只能在桌面 Chromium 浏览器中使用）。

3。执行结果呈现给用户或反映在浏览器中的方式有​​什么不同吗？

没有。在所有情况下，您都是在当前页面的上下文中运行代码。理论上，页面可以替换所有内置方法（例如Function.prototype.call、String.prototype.replace、..），并干扰或滥用脚本的功能。 可能值得注意的是：Cros-s-rider 和 Kango 扩展框架以类似于这三种方法的方式为 Internet Explorer 实现“内容脚本”功能。这意味着页面可以通过检测使用这些框架编写的 IE 插件、拦截 API 声明并滥用其功能的方式来制作。

4。术语“Javascript 注入”和“Bookmarklets”之间有什么区别吗？虽然我相信 Javascript 注入是一种效果，而 Bookmarklets 是实现它的一种方式，但 BHO 和 Chrome 扩展是另一种方式。

小书签和“注入脚本”在概念上没有区别。此答案的第 2 部分解释了一些实际差异。

（通过“注入脚本”，我假设您指的是this method ^{我创造了这个术语来区分Chrome扩展程序中的脚本类型。Opera 12-和Safari都使用这个术语来表示“内容脚本”}）。

5。如果 4 中的假设是正确的，那么使用 BHO 的 execScript 方法或在浏览器中使用 javascript: 协议执行 javascript 的方式有什么不同吗？

除了前面提到的区别，没有。

【讨论】：

清晰简洁。谢谢。

不幸的是，由于浏览器不正确地允许 CSP 指示书签可以访问的 URL，因此在某些情况下插入脚本标记将不起作用。