跨站点脚本
Users are not to be trusted!
用户不可信赖！
…okay, I know that sounds dramatic, but there is a lot of truth to that rather bold statement. In this post, I will be diving into the importance of checking every user interaction within your website, and how not doing so could lead to devastating consequences.
…好吧，我知道这听起来很引人注目，但是这个大胆的说法有很多道理。 在本文中，我将深入探讨检查您网站中每个用户交互的重要性，以及不这样做将如何导致灾难性后果。
When it comes to security concerns on the web, nearly all issues can be traced back to external user interaction. When building a website, a web developer needs to design their site as if every user interaction is made with malicious intent. Let’s examine this by covering one of the top security concerns web developers and users are facing today, Cross-Site Scripting (XSS).
当涉及到网络上的安全性问题时，几乎所有问题都可以追溯到外部用户交互。 在构建网站时，Web开发人员需要设计其网站，就好像每个用户交互都是出于恶意目的。 让我们通过涵盖Web开发人员和用户当今面临的最重要的安全问题之一跨站点脚本(XSS)来进行研究。
In order to understand what XSS is, we need to go back to the early days of the web when times were simpler — the early 90s. Back then, websites were written in HyperText Markup Language (HTML), and that’s pretty much it. But in the mid-90s, JavaScript was created and provided a much more dynamic web interaction, however, with an increase of web capabilities came an increase of potential security risks.
为了了解什么是XSS，我们需要回到90年代初期的Web早期时代。 那时，网站是用超文本标记语言(HTML)编写的，仅此而已。 但是在90年代中期，创建了JavaScript，并提供了更加动态的Web交互，但是，随着Web功能的增加，潜在的安全风险也随之增加。
To understand one of these risks, we need to understand how the browser interacts with HTML. When a user visits a website they receive the page as an HTML file. The page, when inspected, is made up of what are called HTML tags. Tags are essentially the skeleton of your webpage as well as instructions for the browser to perform certain actions. For example, a <b> tag shown in this example: <b>Hello</b>, tells your browser to bold all of the text between those tags, ie, bold the word Hello.
要了解这些风险之一，我们需要了解浏览器如何与HTML交互。 用户访问网站时，他们将页面作为HTML文件接收。 该页面在检查时由所谓HTML标签组成。 标签实质上是网页的骨架，也是浏览器执行某些操作的说明。 例如，此示例中显示的<b>标记： <b>Hello</b> ，告诉您的浏览器将这些标记之间的所有文本加粗，即，将单词Hello加粗。
There are a plethora of HTML tags we could dive into, but for the purpose of this post there is a specific tag I want you to take note of, and it’s a useful yet nefarious one — the <script> tag.
我们可以深入研究很多HTML标记，但是出于这篇文章的目的，我想让您注意一个特定的标记，它是一个有用但有害的标记-<script>标记。
The script tag tells the browser that all of the code enclosed within the tags will be JavaScript instructions for your browser to execute, which is important because the internet would be a much more boring place without JavaScript (say goodbye to sending emails, or even worse, Rickrolling your friends…do people Rickroll anymore?)
脚本标签告诉浏览器，标签中包含的所有代码都是浏览器要执行JavaScript指令，这很重要，因为如果没有JavaScript，互联网将变得更加无聊(说再见，发送电子邮件，甚至更糟) ，请Rickroll您的朋友……再也有人Rickroll吗？)
But what if there was a way for a user to inject their own script tags onto a site in order to, I don’t know, steal other user information and ruin people’s lives?! Well, I’m glad you asked because that is exactly what XSS attacks are!
但是，如果有一种方法可以让用户将自己的脚本标签注入网站，以窃取其他用户信息并破坏人们的生活，那该怎么办？ 好吧，很高兴您提出要求，因为这正是XSS攻击！
Here we have written a script tag that will find the HTML tag with an id of “hacked” and will then create the text “I just edited and hacked this website!” within it. Unwanted text is being added to our page! 在这里，我们编写了一个脚本标签，该脚本标签将找到ID为“ hacked”HTML标签，然后创建文本“我刚刚编辑并黑客入侵了该网站！” 在里面。 不需要的文本正在添加到我们的页面！XSS is the act of injecting malicious code into a web application. This can be done by taking advantage of unsanitized characters that have meaning in HTML, thereby causing browsers to execute harmful JavaScript. It is up to the web developer to scrub user inputs and for browsers to know when that scrubbing hasn’t been performed.
XSS是将恶意代码注入Web应用程序的行为。 这可以通过利用在HTML中具有含义的未经消毒的字符来完成，从而导致浏览器执行有害JavaScript。 Web开发人员可以清理用户输入，浏览器则可以知道何时未执行清理。
Let’s learn more about XSS by going through an example. Say you’re on your favorite message board and you want to load the latest comments. Well, some sneaky user just posted the comment, <script> **insert terrible, horrible, no good, very bad code here** </script>. The browser goes line by line of your HTML page, sees a valid script tag with a set of instructions, and executes the malicious code.
让我们通过一个示例来学习有关XSS的更多信息。 假设您在自己喜欢的留言板上，并且想加载最新评论。 好吧，一些偷偷摸摸的用户刚刚发布了评论， <script> **insert terrible, horrible, no good, very bad code here** </script> 。 浏览器会逐行浏览HTML页面，查看带有一组指令的有效脚本标签，然后执行恶意代码。
If the code was designed to steal the cookies in your browser, you could potentially be very exposed. The attacker has already stolen all of your savings due to the fact that some of the cookies present were from when you visited your bank’s website, and the hacker is now on their way to Aruba to soak up the sun and drink a piña colada on YOUR dollar. Smh, it’s a cold world out there…but not in Aruba.
如果该代码旨在窃取浏览器中的cookie，那么您可能会非常暴露。 攻击者已经偷走了您所有的积蓄，原因是其中存在的某些Cookie是您访问银行网站时产生的，而黑客现在正前往Aruba吸收阳光并在您的手中喝点比萨饼美元。 Smh，那里是一个寒冷的世界……但是在Aruba中却没有。
Web developers can combat XSS security threats by checking if user inputs are safe. One way they can do that is by sanitizing certain characters that have special meaning in HTML. Some examples of these meaningful characters are the double quote (“), the single quote (‘), the opening angle bracket (<), and the closing angle bracket (>). However, sometimes people want to write comments that include angle brackets or quotes so how can we as web developers ensure our clients have their creative writing freedoms, all the while ensuring that we aren’t getting hacked?
Web开发人员可以通过检查用户输入是否安全来抵抗XSS安全威胁。 他们做到这一点的一种方法是清除某些在HTML中具有特殊含义的字符。 这些有意义的字符的一些示例是双引号(“)，单引号(')，左尖括号(<)和右尖括号(>)。 但是，有时人们想写包含尖括号或引号的注释，因此作为Web开发人员，我们如何才能确保客户享有创造性的写作自由，同时又确保我们不会被黑客入侵？
Well, the smart people at HTML came up with another way to render those special characters in what is called HTML Entities. A page source would show the following instead:
好吧，HTML的聪明人提出了另一种方法来渲染所谓HTML实体中的特殊字符。 页面源将显示以下内容：
(“) would be " (“)将为“ (‘) would be ' (')将为' (<) would be < (<)将为＆lt; (>) would be > (>)将为＆gt;For example, when the browser reads < it will correctly render a < character all while recognizing that it isn’t the beginning of valid HTML instructions, which is great!
例如，当浏览器显示< 它会正确呈现一个<字符，同时认识到这不是有效HTML指令的开始，这太好了！
But now you might be asking yourself, what if the web developer isn’t responsible and isn’t scrubbing user inputs? I should still be safe as a user even if the website isn’t entirely secure, and you know what, you’re right! Well, this is where browsers implement a Same Origin Policy (SOP) as a security measure. Essentially, the browser restricts how websites can interact with each other from different port/host/protocol origins, especially with read requests.
但是现在您可能会问自己，如果Web开发人员不负责任并且不清理用户输入该怎么办？ 即使网站并不完全安全，我仍然应该是安全的用户，而且您知道吗，您是对的！ 好吧，这是浏览器在其中实施相同起源策略(SOP)作为安全措施的地方。 从本质上讲，浏览器限制了网站如何从不同的端口/主机/协议来源相互交互，尤其是在读取请求时。
Continuing from the previous message board example, let’s say another user did indeed inject their own script tag to grab your bank cookies and take a look at your bank information. SOP would prevent this from happening because the browser would recognize that there was a request to read the information on your bank’s website all the way from the message board site. They have different port origins, therefore, the browser would not allow the read to occur.
继续前面的留言板示例，假设另一个用户确实注入了自己的脚本标签来获取您的银行cookie，并查看您的银行信息。 SOP可以防止这种情况的发生，因为浏览器会识别出存在从留言板站点一直读取银行网站上的信息的请求。 它们具有不同的端口来源，因此，浏览器将不允许进行读取。
But now you ask, what if the evil hacker doesn’t perform a read request, but rather a write request to my bank’s website in order to transfer money (you ask a lot of questions by the way). Well, banks now use what are called synchronizer tokens (sync tokens) every time a transfer is made. Sync tokens are unique values that are used to authorize financial transfers, and considering that hacker can’t perform a read to see what that sync token might be, the transfer wouldn’t go through. Hooray, your money is still in your account, and now when you inevitably go somewhere tropical, don’t forget about me!
但是，现在您问，如果邪恶的黑客不执行读取请求，而是向我的银行网站执行写入请求以转移资金(您会提出很多问题)，该怎么办？ 好吧，银行现在每次进行转帐时都使用所谓的同步令牌(同步令牌)。 同步令牌是用于授权财务转移的唯一值，并且考虑到黑客无法执行读取操作以查看该同步令牌可能是什么，因此转移不会进行。 万岁，您的钱仍在您的帐户中，现在当您不可避免地要去热带某个地方时，请不要忘记我！
It’s important as web developers to protect ourselves and our clients by scrubbing and sanitizing every single area of user input and interaction on our websites. While the browser does have security measures in place that help, they cannot be solely relied upon to create a secure environment. As a user, ensure that the websites you are going to are trusted and safe sites that have security protocols in place, otherwise you too will understand the hard way that your fellow users are simply not to be trusted.
作为Web开发人员，重要的是通过清理和清理用户输入和我们网站上的交互的每个区域来保护自己和我们的客户。 尽管浏览器确实具有可提供帮助的安全措施，但不能仅依靠它们来创建安全的环境。 作为用户，请确保您将要访问的网站是受信任的网站，并且已安装了安全协议，并且这些网站都是安全的网站，否则，您也将了解不让其他用户受到信任的艰难方式。
For continued reading, I recommend checking out the book Real-World Bug Hunting: A Field Guide to Web Hacking by Peter Yaworski. Additionally, the Open Web Application Security Project (OWASP) comes out with the top 10 cybersecurity concerns every few years and is a fantastic tool.
若要继续阅读，我建议阅读Peter Yaworski的《 真实世界的错误狩猎：网络黑客领域指南》一书。 此外，开放Web应用程序安全项目(OWASP)每隔几年就会出现十大网络安全问题，它是一个了不起的工具。
Real-World Bug Hunting: A Field Guide to Web Hacking by Peter Yaworski
真实世界的Bug搜寻：Peter Yaworski撰写的Web黑客实地指南
OWASP Top Ten Project
OWASP十大项目
How to Prevent XSS
如何防止XSS
Securing The Stack. Ep. 3 — Same-Origin Policy (Video)
保护堆栈。 Ep。 3 —同源政策(视频)
翻译自: https://medium.com/swlh/introduction-to-cross-site-scripting-921affa81b64
跨站点脚本
相关资源：跨站点脚本编制问题解决