Skip to content

Commit

Permalink
fix: prevent signs like "<" or ">" to be treated as HTML in styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@hsablonniere
hsablonniere committed Jul 28, 2015
1 parent 4e7acd3 commit 214f698
Show file tree
Hide file tree
Showing 8 changed files with 16 additions and 6 deletions.
2 changes: 1 addition & 1 deletion lib/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ function main() {
return inliner.cssImports(url, css)
.then(inliner.cssImages.bind(inliner, url))
.then(function then(css) {
$(style).html(css);
$(style).text(css);
});
});

Expand Down
2 changes: 1 addition & 1 deletion test/fixtures/css-ext-import.result.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta charset="UTF-8"> <title>App</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}</style> </head> <body> body </body> </html>
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta charset="UTF-8"> <title>App</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;}</style> </head> <body> body </body> </html>
2 changes: 1 addition & 1 deletion test/fixtures/css-ext.result.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>External script + css</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAP0BAP39/QAAACwAAAAAAQABAAACAkQBADs=') repeat;}</style> <script src="http://localhost:54321/script.min.js"></script> <script>function doit(o){var r="remy",e=o.bar="sharp";return r+e.split("").reverse().join("")}console.log(doit(window));</script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>External script + css</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAP0BAP39/QAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;}</style> <script src="http://localhost:54321/script.min.js"></script> <script>function doit(o){var r="remy",e=o.bar="sharp";return r+e.split("").reverse().join("")}console.log(doit(window));</script> </head> <body> </body> </html>
2 changes: 1 addition & 1 deletion test/fixtures/css-import.result.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>inline style</title> <style> p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;} p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;} p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;} @media screen and orientation:landscape{p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}}</style> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>inline style</title> <style> p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;} p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;} p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;} @media screen and orientation:landscape{p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;}}</style> </head> <body> </body> </html>
2 changes: 1 addition & 1 deletion test/fixtures/image-css.result.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css image</title> <style> body{ background:black;}#image{ background:url(data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=) repeat;height:400px;width:400px;}#image{ background:url( "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=" ) repeat;}</style> </head> <body> <div id="image"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css image</title> <style> body{ background:black;}#image{ background:url(data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=) repeat;height:400px;width:400px;}#image{ background:url( "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=" ) repeat;}p:before{ content:'<';color:blue;}</style> </head> <body> <div id="image"></div> </body> </html>
5 changes: 5 additions & 0 deletions test/fixtures/image-css.src.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@
/* another version of url include that could break */
background: url( "1x1.gif" ) repeat;
}

p:before {
content: '<';
color: blue;
}
</style>
</head>
<body>
Expand Down
5 changes: 5 additions & 0 deletions test/fixtures/import.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
p {
font-size: 10px;
background: url('1x1.gif') repeat;
}

p:before {
content: '<';
color: blue;
}
2 changes: 1 addition & 1 deletion test/fixtures/kitchen-sink.result.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>full combo</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}</style> <style> p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}body{ font-family:sans-serif;}#icon{ height:48px;width:48px;background:url(data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=) no-repeat;background-size:cover;}</style> </head> <body> <script>function doit(o){var r="remy",e=o.bar="sharp";return r+e.split("").reverse().join("")}console.log(doit(window));</script> <script>console.log("Hello world");</script> <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=" title="White 1x1"> <div id="icon"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>full combo</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;}</style> <style> p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;}body{ font-family:sans-serif;}#icon{ height:48px;width:48px;background:url(data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=) no-repeat;background-size:cover;}</style> </head> <body> <script>function doit(o){var r="remy",e=o.bar="sharp";return r+e.split("").reverse().join("")}console.log(doit(window));</script> <script>console.log("Hello world");</script> <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=" title="White 1x1"> <div id="icon"></div> </body> </html>

0 comments on commit 214f698

Please sign in to comment.