DEV Community

Discussion on: How do you use an SVG as background image without affecting security?

View post

Replies for: What’s your CSP?

 
drishit96 profile image
Drishit Mitra • 
default-src 'none' ; script-src 'self'; style-src 'self' https://code.getmdl.io/1.3.0/material.teal-orange.min.css; img-src 'self' ; font-src https://fonts.gstatic.com/s/materialicons/; connect-src 'self' https://fonts.gstatic.com/s/materialicons/ https://fonts.googleapis.com/icon https://code.getmdl.io/1.3.0/material.teal-orange.min.css; media-src 'none' ; object-src 'none' ; child-src 'none' ; frame-src 'self'; worker-src 'self' ; frame-ancestors 'none' ; form-action 'none' ; upgrade-insecure-requests; block-all-mixed-content; base-uri 'self'; manifest-src 'self';
Thread Thread
 
tompearson profile image
Tom Pearson •

the difference between url('/img/bg.svg') and url("../img/bg.svg") is that the former is an absolute path and will always refer to the same resource the latter is a relative path and the resource it refers to will change depending on the URL of the page that makes the request.

For example if the page making the request is example.com/page/content/index.html then '/img/bg.svg' will look for the SVG at example.com/img/bg.svg whereas '../img/bg.svg' will look for the SVG at example.com/page/img/bg.svg