服务器端实现安全的JavaScript跨域访问策略

TXT文件

下载需积分: 31 | 4KB | 更新于2025-02-11 | 58 浏览量 | 举报收藏

立即下载

在服务器端实现可控的JavaScript跨域访问涉及一种策略，允许客户端脚本在受到服务器控制的情况下跨越不同源（CORS）获取数据或执行某些操作。这种技术通常用于Web应用程序中，当客户端浏览器的同源策略限制了直接与非同源服务器通信时。以下是如何通过精心设计的方法来实现在服务器端处理跨域请求的步骤： 1. **理解跨域限制**: 浏览器的同源策略（Same-Origin Policy）是JavaScript的一个安全特性，它防止一个源（如 http://localhost:8080）的脚本与另一个源（如 http://example.com）的资源交互。除非明确允许，否则默认情况下不允许跨域请求。 2. **服务器端支持**: 为了使客户端的JavaScript能够访问服务器，服务器端需要设置允许跨域的响应头（CORS headers），例如`Access-Control-Allow-Origin`、`Access-Control-Allow-Methods`等。这些头告诉浏览器客户端的请求是可以接受的。 3. **编码和提交请求**: 代码示例中的`var url`展示了如何构造一个包含参数的URL，这些参数包括用户提供的URL、标题、标签、笔记等，并且对URL进行了编码，以确保安全性。接着，创建了一个`<script>`元素，但类型被误设为`text/java`，应该是`text/javascript`。 4. **利用`<script>`标签的技巧**: 实际上，这段代码并没有直接发送请求，而是利用`<script>`标签的特性来绕过浏览器的同源策略。通过创建`js_obj`对象，然后将其类型设置为`text/javascript`，服务器端可以通过在`src`属性中写入预编译的JavaScript代码，间接执行跨域请求。这被称为"JSONP"（JSON with Padding）技术，通过动态插入 `<script>` 来调用一个可信任的第三方 URL（通常是服务器返回的 JSON 数据包装在一个 `<script>` 的文本中）。 5. **服务器端处理**: 服务器端接收到这个`<script>`请求后，如果设计得当，会解析其中的参数，执行必要的逻辑（如保存到数据库、计算结果等），然后返回一个包含跨域数据的JSON响应。这个响应会被浏览器作为JavaScript代码执行，从而实现跨域功能。 6. **安全性考虑**: 虽然这种方法可以解决跨域问题，但也存在潜在的安全风险，因为服务器需要信任客户端提供的所有参数。因此，必须谨慎设计服务器端验证和过滤机制，以防止恶意输入或注入攻击。 7. **其他跨域解决方案**: 除了JSONP外，还有其他方法如CORS（在现代浏览器中更推荐）、WebSocket、或者使用代理服务器转发请求。然而，这些方法各有优缺点，适用于不同的场景和需求。总结来说，服务器端用可控的JavaScript跨域访问是通过巧妙地利用`<script>`标签的特性，配合服务器端的支持来实现的。尽管如此，始终需要注意安全性和兼容性问题，确保正确处理跨域请求。

我在最近的一个 web 项目中为了实现 bookmark 功能碰到了 javascript 跨域访问的问题。起初，在 google 上搜的很多解决方案并不适用于我的情形，只在有一篇文章中提到的远程加载 javascript 方法从理论上看到了解决的希望。但可惜作者只是一笔带过，并未用例子详细说明，所以不得不摸索了一阵才把这个问题搞定。在此，希望通过本文为同样被这个问题困扰的朋友们提供一个解决方法作为参考。如有错误，欢迎指正!

　　Bookmark 是目前许多 web2.0 网站 (http://del.icio.us/, www.diigo.com 等)都提供的热门 feature 。它能将互联网上自己喜欢的网页收藏到 Bookmark 服务器上。本文要解决的问题就发生在用户提交网页 URL (还包括 Tag, Notes 等)给 Bookmark 服务器时。

　　关于 URL 的提交至少可以有三种方式：

　　1. 登陆 Bookmark 服务器的提交页面，将要收藏的 URL 通过该页面提交给服务器。

　　2. 安装浏览器插件，通过插件将 URL 提交给服务器。

　　3. 从 Bookmark 服务器动态加载 javascript 小工具到当前页面，通过它来完成提交工作。(参考 diigo 的例子，收藏一个网页链接到浏览器收藏夹，链接的 URL 是一段 javascript 代码，它会从服务器加载一段 javascript 注入当前网页)

　　第一种方式开发起来最简单，但对用户来讲比较麻烦，每次都需要先登陆 Bookmark 服务器才能完成提交;第二种方式我并不熟悉插件开发，而且用户也不喜欢太多的插件堆满自己的浏览器;第三种方式开发难度小，又避免了每次登陆服务器的麻烦，所以我最终采用了它。

　　上面讲的第三种方式中动态加载的 javascript 小工具除了需要生成 UI 供用户填写信息( URL ， tag ， notes 等)，当用户点击提交的时候，还要完成与服务器通信的功能。在没有跨域访问经验的情况下，最先想到的当然是 ajax !但很快就会发现根本行不通。

　　跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。写过跨域访问 ajax 的朋友相信都遇到过被告知“没有权限”的情况。通过 XMLHttp 来发送数据给 Bookmark 服务器的尝试失败了。于是，看到网上的一些资料，我又开始尝试用 javascript 小工具在用户网页动态创建一个隐藏的 iframe, iframe 的 src 指向服务器的一个 servlet ，试图通过调用 iframe 中提供的 javascript 来完成与服务器的通信。但不幸的是，用户网页中的 javascript 代码访问 iframe 也被浏览器归为跨域访问(特指 iframe 的 src 指向其它网站的情形)，尝试再次失败。

　　最终，在一篇文章中看到，与 iframe 不同，如果 A 网站从 B 网站加载 javascript ， A 网站可以自由的访问该 javascript 的内容，并不会被浏览器认为是跨域访问。模仿刚才 iframe 的思路，当用户点击提交时，可以动态创建一个 javascript 对象，该对象的 src 指向 Bookmark 服务器的一个 servlet ，注意： URL 、 Tag 、 Notes 、 User 、 Password 等信息被作为 src URL 参数传给服务器。请看下面的代码：

以下是引用片段：
　　var url = "http://localhost:8080/Deeryard/BookmarkServlet?" +
　　"url=" + url_source + "&" + "title=" + title + "&" +
　　"tag=" + tag + "&" + "notes=" + notes + "&" + "user=" + user + "&" + "password=" + password;
　　url = encodeURI(url);
　　//Submit to server with a trick
　　var js_obj = document.createElement( "script" );
　　js_obj.type = "text/javascript" ;
　　js_obj.setAttribute( "src" , url);
　　//Get response from server by appending it to document

下载后可阅读完整内容，剩余1页未读，立即下载