JS Prevent XSS but allow HTML URL

Question

I have an Angular 1 app, with a form input used for creating site notifications.

A user can enter a full url http://example.com or they can also enter a path within the application /foo/barboo

However, an attacker could also enter javascript:alert(1);// and when the notification link is pressed, the JS will fire.

Is it possible to encode this input but still allow url's to be treated as such?

Why do you need them to be able to use relative links? This would make everything a lot easier — Luca Kiebel
– Luca Kiebel, Commented Jun 4, 2018 at 9:22
I'm not privy to the design decisions I'm afraid, this is something I have been asked to work on that is 5 or 6 years old. I would change the whole thing if I could — Harry Blue
– Harry Blue, Commented Jun 4, 2018 at 9:24

Luca Kiebel · Accepted Answer · 2018-06-04 09:43:28Z

2

Here is a regex that'll match both URIs starting with a schema (http/https/ftp) and "relative" URIs starting with a slash:

/((\/[\w-.]+)(\/[\w-.]+)*\/?)|(((http|ftp|https):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?)/gi

const re = /((\/[\w-.]+)(\/[\w-.]+)*\/?)|(((http|ftp|https):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?)/gi

console.log("https://example.com/foo/bar".match(re)[0]); //matches 

console.log("/foo/bar/baz/bim".match(re)[0]); //matches

console.log("javascript:alert('xss');//".match(re)); //doesn't match (null)

console.log("/foo/bar/baz/bim.html".match(re)[0]); //matches

console.log("https://example.com/foo/bar-api.php?e=mc2".match(re)[0]); //matches

regexr.com

answered Jun 4, 2018 at 9:43

Luca Kiebel

10.1k7 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JS Prevent XSS but allow HTML URL

1 Answer 1

regexr.com

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related