如何给用户一个javascript小部件来安全地从我的站点中提取内容

I need to be allow content from our site to be embeded in other users web sites. The conent will be chargeable so I need to keep it secure but one of the requirements is that the subscribing web site only needs to drop some javascript into their page.

我需要允许来自我们网站的内容被嵌入到其他用户的网站中。conent是收费的，所以我需要保证它的安全性，但其中的一个要求是订阅web站点只需要将一些javascript放到他们的页面中。

It looks like the only way to secure our content is to check the url of the page hosting our javascript matches the subscribing site. Is there any other way to do this given that we don't know the client browsers who will be hitting the subscribing sites?

看起来保护内容的唯一方法是检查承载javascript的页面的url是否与订阅站点匹配。如果我们不知道哪些客户端浏览器会访问订阅站点，还有其他的方法吗?

Is the best way to do this to supply a javascript include file that populates a known page element when the page loads? I'm thinking of using jquery so the include file would first call in jquery (checking if it's already loaded and using some sort of namespace protection), then on page load populate the given element.

这样做的最佳方式是在页面加载时提供一个javascript包含文件来填充一个已知的页面元素吗?我正在考虑使用jquery，以便include文件首先使用jquery调用(检查是否已经加载并使用某种名称空间保护)，然后在页面加载时填充给定的元素。

I'd like to include a stylesheet as well if possible to style the element but I'm not sure if I can load this along with the javascript.

如果可能的话，我还想包含一个样式表来样式化元素，但我不确定是否可以将它与javascript一起加载。

Does this sound like a reasonable approach? Is there anything else I should consider?

这听起来合理吗?还有什么需要我考虑的吗?

Thanks in advance,

提前谢谢,

Mike

迈克

2 个解决方案

#1

It looks like the only way to secure our content is to check the url of the page hosting our javascript matches the subscribing site.

看起来保护内容的唯一方法是检查承载javascript的页面的url是否与订阅站点匹配。

Ah, but in client-side or server-side code?

但是在客户端或服务器端代码中呢?

They both have their disadvantages. Doing it with server-side code is unreliable because some browsers won't be passing a Referer header at all, and if you want to stop caches keeping a copy of the script, preventing the Referer-check from taking place, you have to serve with nocache or Vary: Referer headers, which would harm performance.

他们都有各自的缺点。在服务器端代码是不可靠的,因为有些浏览器不会通过引用页头,和如果你想要停止饱缓存脚本的副本,防止Referer-check现象的发生,你必须搭配使用nocache或不同:推荐人头,这将损害性能。

On the other hand, with client-side checks in the script you return, you can't be sure your environment you're running in hasn't been sabotaged. For example if your inclusion script tag was like:

另一方面，在返回的脚本中进行客户端检查时，您不能确保正在运行的环境没有受到破坏。例如，如果您的包含脚本标记如下:

<script src="http://include.example.com/includescript?myid=123"></script>

and your server-side script looked up 123 as being the ID for a customer using the domain customersite.foo, it might respond with the script:

服务器端脚本将123查找为使用域customersite的客户的ID。foo，它可能会响应脚本:

if (location.host.slice(-16)==='customersite.foo') {
    // main body of script
} else {
    alert('Sorry, this site is not licensed to include content from example.com');
}

Which seems simple enough, except that the including site might have replaced String.prototype.slice with a function that always returned customersite.foo. Or various other functions used in the body of the script might be suspect.

这看起来很简单，除了包含的站点可能已经替换了String.prototype。使用总是返回customersite.foo的函数进行切片。或者脚本主体中使用的其他函数可能是可疑的。

Including a <script> from another security context cuts both ways: the including-site has to trust the source-site not to do anything bad in their security context like steal end-user passwords or replace the page with a big goatse; but equally, the source-site's code is only a guest in the including-site's potentially-maliciously-customised security context. So a measure of trust must exist between the two parties wherever one site includes script from another; the domain-checking will never be a 100% foolproof security mechanism.

包括来自另一个安全上下文的

I'd like to include a stylesheet as well if possible to style the element but I'm not sure if I can load this along with the javascript.

如果可能的话，我还想包含一个样式表来样式化元素，但我不确定是否可以将它与javascript一起加载。

You can certainly add stylesheet elements to the document's head element, but you would need some strong namespacing to ensure it didn't interfere with other page styles. You might prefer to use inline styles for simplicity and to avoid specificity-interference from the page's main style sheet.

您当然可以向文档的head元素添加样式表元素，但是您需要一些强大的名称空间来确保它不会影响其他页面样式。为了简单起见，您可能更喜欢使用内联样式，并避免来自页面主样式表的特定干扰。

It depends really whether you want your generated content to be part of the host page (in which case you might prefer to let the including site deal with what styles they wanted for it themselves), or whether you want it to stand alone, unaffected by context (in which case you would probably be better off putting your content in an <iframe> with its own styles).

它真的取决于你是否想要生成的内容页面的一部分(在这种情况下,你可能更愿意让包括网站自己处理他们所要什么样式),或者你想要独立,不受环境影响(在这种情况下,你最好把你的内容在一个< iframe >有自己的风格)。

I'm thinking of using jquery so the include file would first call in jquery

我正在考虑使用jquery，因此包含文件将首先调用jquery。

I would try to avoid pulling jQuery into the host page. Even with noconflict there are ways it can conflict with other scripts that are not expecting it to be present, especially complex scripts like other frameworks. Running two frameworks on the same page is a recipe for weird errors.

我将尽量避免将jQuery拖到主机页面中。即使没有冲突，它也有可能与不希望它出现的其他脚本发生冲突，特别是像其他框架那样复杂的脚本。在同一个页面上运行两个框架会导致奇怪的错误。

(If you took the <iframe> route, on the other hand, you get your own scripting context to play with, so it wouldn't be a problem there.)

(另一方面，如果您采用路由，您可以使用自己的脚本上下文，这样就不会有问题了。)&lt;/p&gt;

#2

You can store the users domain, and a key within your local database. That, or the key can be an encrypted version of the domain to keep you from having to do a database lookup. Either one of these can determine whether you should respond to the request or not.

您可以在本地数据库中存储用户域和键。或者，密钥可以是域的加密版本，以防止您进行数据库查找。其中任何一个都可以决定您是否应该响应请求。

If the request is valid, you can send your data back out to the user. This data can indeed load in jQuery and and additional CSS reference.

如果请求有效，可以将数据发送回用户。这些数据确实可以在jQuery和其他CSS引用中加载。

Related:

#1