在远程加载的javascript中使用document.write写出内容 - 为什么一个坏主意？
[英]using document.write in remotely loaded javascript to write out content - why a bad idea?
问题描述
I'm not a full-time Javascript developer. 
我不是全职的Javascript开发人员。 We have a web app and one piece is to write out a small informational widget onto another domain. 我们有一个Web应用程序，其中一个是将一个小的信息小部件写到另一个域。 This literally is just a html table with some values written out into it. 字面上只是一个html表，其中写有一些值。 I have had to do this a couple of times over the past 8 years and I always end up doing it via a script that just document.write's out the table. 在过去的8年里，我不得不这样做了几次，而且我总是通过一个脚本来完成它，这个脚本只是document.write的表格。
For example: 例如：
document.write('<table border="1"><tr><td>here is some content</td></tr></table>');
on theirdomain.com 在他们的域名网站上
<body>
....
<script src='http://ourdomain.com/arc/v1/api/inventory/1' type='text/javascript'></script>
.....
</body>
I always think this is a bit ugly but it works fine and we always have control over the content (or a trusted representative has control such as like your current inventory or something). 我一直认为这有点难看，但它工作正常，我们总是可以控制内容（或者受信任的代表有控制权，比如你当前的库存或其他东西）。 So another project like this came up and I coded it up in like 5 minutes using document.write. 所以这样的另一个项目出现了，我使用document.write在5分钟内编写了它。 Somebody else thinks this is just too ugly but I don't see what the problem is. 有人认为这太丑了，但我不知道问题是什么。 Re the widget aspect, I have also done iframe and jsonp implementations but iframe tends not to play well with other site's css and jsonp tends to just be too much. 在小部件方面，我也做了iframe和jsonp实现，但是iframe往往不能很好地与其他网站的css和jsonp一起使用往往太多了。 Is there a some security element I'm missing? 我缺少一些安全元素吗？ Or is what I'm doing ok? 或者我正在做什么？ What would be the strongest argument against using this technique? 反对使用这种技术最强烈的论点是什么？ Is there a best practice I don't get? 有没有最好的做法我没有得到？
3 个解决方案
解决方案1
4 已采纳 2014-01-16 22:34:56
To be honest, I don't really see a problem. 说实话，我真的没有看到问题。 Yes, document.write is very old-school, but it is simple and universally supported; 是的， document.write 非常老派，但它很简单，普遍支持; you can depend on it working the same in every browser. 你可以依靠它在每个浏览器中工作相同。
For your application (writing out a HTML table with some data), I don't think a more complex solution is necessary if you're willing to assume a few small risks. 对于您的应用程序（写出包含一些数据的HTML表格）， 如果您愿意承担一些小风险，我认为不需要更复杂的解决方案。 Dealing with DOM mutation that works correctly across browsers is not an easy thing to get right if you're not using jQuery (et al). 如果您不使用jQuery（等），处理跨浏览器正常工作的DOM变异并不是一件容易的事情。
The risks of document.write : document.write的风险：
Your script must be loaded synchronously.
您的脚本必须同步加载。 This means a normal inline script tag (like you're already using). 这意味着一个普通的内联脚本标记（就像你已经在使用）。 However, if someone gets clever and adds the asyncordeferattributes to your script tag (or does something fancy like appending a dynamically createdscriptelement to thehead), your script will be loaded asynchronously.但是，如果某人变得聪明并将async或defer属性添加到您的脚本标记中（或者像将动态创建的script元素附加到head那样花哨的话），则会异步加载您的脚本。This means that when your script eventually loads and calls
write, the main document may have already finished loading and the document is "closed".这意味着当您的脚本最终加载并调用write，主文档可能已经完成加载并且文档已“关闭”。 Callingwriteon a closed document implicitly callsopen, which completely clears the DOM – it's esentially the same as wiping the page clean and starting from scratch.在封闭文档上调用write隐式调用open，这会完全清除 DOM - 它实际上与擦除页面干净并从头开始一样。 You don't want that.你不希望这样。 Because your script is loaded synchronously, you put third-party pages at the mercy of your server.
因为你的脚本是同步加载，你把第三方的网页，在你的服务器的摆布。 If your server goes down or gets overloaded and responds slowly, every page that contain your script tag cannot finish loading until your server does respond or the browser times out the request. 如果您的服务器出现故障或过载并且响应缓慢，则在您的服务器响应或浏览器超时请求之前，包含脚本标记的每个页面都无法完成加载 。 The people who put your widget on their website will not be happy.
将您的小部件放在他们的网站上的人将不会高兴。
If you're confident in your uptime, then there's really no reason to change what you're doing. 如果您对正常运行时间充满信心，那么就没有理由改变您正在做的事情。
The alternative is to load your script asynchronously and insert your table into the correct spot in the DOM. 另一种方法是异步加载脚本并将表插入DOM中的正确位置。 This means third parties would have to both insert a script snippet (either <script async src="..."> or use the dynamic script tag insertion trick. They would also need to carve out a special <div id="tablegoeshere"> for you to put your table into. 这意味着第三方必须同时插入脚本片段（ <script async src="...">或使用动态脚本标签插入技巧。他们还需要创建一个特殊的<div id="tablegoeshere">让你把你的桌子放进去。
解决方案2
2 2014-01-16 22:04:22
Using document.write() after loading the entire DOM do not allow you to access DOM any further. 在加载整个DOM之后使用document.write()不允许您进一步访问DOM。
See Why do I need to use document.write instead of DOM manipulation methods? 请参阅为什么我需要使用document.write而不是DOM操作方法？ . 。
You are in that case putting away a very powerfull functionnality of in web page... 在这种情况下，你在网页中放弃了一个非常强大的功能...
解决方案3
2 2014-01-17 11:02:34
Is there a some security element I'm missing?
The security risk is for them in that theirdomain.com trusting your domain's script code to not do anthing malicous. 他们面临的安全风险是，他们的域名theirdomain.com信任您的域名的脚本代码，而不是恶作剧。 Your client script will run in the context of their domain and can do what it likes such as stealing cookies or embedding a key logger (not that you would do that of course). 您的客户端脚本将在其域的上下文中运行，并且可以执行其喜欢的操作，例如窃取cookie或嵌入密钥记录器（当然不是您会这样做）。 As long as they trust you, that is fine. 只要他们信任你，那就没事了。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.