Content Security Policy explained | how to protect against Cross Site Scripting (XSS)

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 พ.ย. 2024

ความคิดเห็น • 100

  • @jgoebel
    @jgoebel  3 ปีที่แล้ว +11

    What do you think about this video?
    Let me know in the comments below.

    • @rhitmanandhar525
      @rhitmanandhar525 3 ปีที่แล้ว +1

      Loved it. Thank you.

    • @lksjfadlk
      @lksjfadlk 2 ปีที่แล้ว

      Thanks man.

    • @isagive
      @isagive 4 หลายเดือนก่อน

      i needed a good rule for a modern website. not only why, but some kind of common what.

    • @wajeehsaleh6121
      @wajeehsaleh6121 3 หลายเดือนก่อน

      Thanks, man!

  • @truepakistani9604
    @truepakistani9604 2 ปีที่แล้ว +8

    5:48 default-src default of switch statement wow. Explained in just a single statement 👍👍👍

    • @jgoebel
      @jgoebel  2 ปีที่แล้ว

      you're most welcome

  • @Barrosy
    @Barrosy ปีที่แล้ว +3

    Oh my god I was looking all over the web what the meaning behind meta tags and CSP was until I found this video. It's crystal clear to me now. Thank you so much sir.

  • @ash_tray_6
    @ash_tray_6 ปีที่แล้ว +3

    Thank you! You’re a fantastic teacher.

    • @jgoebel
      @jgoebel  ปีที่แล้ว

      I'm glad you liked it

  • @stomperhk9107
    @stomperhk9107 3 ปีที่แล้ว +1

    Dude.... Thank's a ton for that objective video.

    • @jgoebel
      @jgoebel  3 ปีที่แล้ว +1

      Glad it was helpful!

  • @ryanvelbon
    @ryanvelbon 24 วันที่ผ่านมา

    Great explanation. Thanks

  • @noelcovarrubias7490
    @noelcovarrubias7490 3 ปีที่แล้ว

    Thank you. I first read the article but I was a bit confused because I never heard of XSS before so I came here an after the first 3 mins it was crystal clear to me. :D

    • @jgoebel
      @jgoebel  3 ปีที่แล้ว

      thx Noel, I'm glad I could help!

  • @hekarboi3656
    @hekarboi3656 2 ปีที่แล้ว +1

    straight to the point, thanks

    • @jgoebel
      @jgoebel  2 ปีที่แล้ว

      you're welcome Hekar

  • @grahamschuckman3483
    @grahamschuckman3483 2 ปีที่แล้ว +1

    Think it would’ve been helpful if you did actually demo a few examples with setting the various directives. Hard to make sense of how each works by just reading the MDN pages that you showed.

  • @ahmedelgaidi
    @ahmedelgaidi 3 ปีที่แล้ว

    The best as always

    • @jgoebel
      @jgoebel  3 ปีที่แล้ว

      thx Ahmed 👍

  • @siyamrubaiyeat5852
    @siyamrubaiyeat5852 2 ปีที่แล้ว

    fixing one missing content security policy header is it impacts the entire website?

  • @TrumpsOfDesign
    @TrumpsOfDesign ปีที่แล้ว

    Thanks for explanation. I've searched resources, that can explain me in simple way what is CSP and what it for. After this video I have superficial understanding that is enough for my purposes

  • @otiagosantoscode
    @otiagosantoscode ปีที่แล้ว

    I can't figure out how to implement this in practice!! I'm trying to put a google maps on a statistical html page, but it keeps giving a csp warning or the map doesn't load.

  • @nemisis282
    @nemisis282 4 หลายเดือนก่อน

    So if im understanding this correctly, this just prevents loading scripts, from sources not allowed by the CSP. But an attacker could still use an inline script tag to run any javascript they could fit everything they need within the comment box (assuming stored and in a comment input)?

    • @jacksontarlin6841
      @jacksontarlin6841 2 หลายเดือนก่อน

      CSPs block all inline scripts by default, though if you have specific inline scripts you want to allow you can identify them with hashes or nonces to whitelist with the CSP.

  • @petrtcoi9398
    @petrtcoi9398 2 ปีที่แล้ว

    Great explanation!

    • @jgoebel
      @jgoebel  2 ปีที่แล้ว

      Thanks!

  • @justtruth5157
    @justtruth5157 2 ปีที่แล้ว

    Very nice video!!!

  • @ecommercetechbuild1354
    @ecommercetechbuild1354 4 หลายเดือนก่อน

    Wonderful explanation

    • @jgoebel
      @jgoebel  3 หลายเดือนก่อน

      Glad it was helpful!

  • @dublinnnn
    @dublinnnn 10 หลายเดือนก่อน

    Nicely Explained >>

    • @jgoebel
      @jgoebel  10 หลายเดือนก่อน

      Glad it was helpful!

  • @superdop1976
    @superdop1976 ปีที่แล้ว

    Thank you for the great explanation.

    • @jgoebel
      @jgoebel  ปีที่แล้ว

      You are welcome!

  • @FlanzetaGaming
    @FlanzetaGaming 3 หลายเดือนก่อน

    What do you think about unsafe-inline in style? i have an app with firebase + react... managed to use nonces but in client side rendering, so styles are broken

  • @emily_tm
    @emily_tm 10 หลายเดือนก่อน

    great explanation, many thanks!

    • @jgoebel
      @jgoebel  10 หลายเดือนก่อน

      Glad you enjoyed it!

  • @II22-b2s
    @II22-b2s 4 หลายเดือนก่อน

    on my wordpress website -chrome on my phone says not secure, safari on laptop also says not secure but my SSL certificate is good i checked. also chrome on my laptop doesn't say not secure. I went to inspect >console on website and this error was there but I don't know what it means or where the error is located. The Source Location is blank - "Content Security Policy of your site blocks the use of 'eval' in JavaScript`
    The Content Security Policy (CSP) prevents the evaluation of arbitrary strings as JavaScript to make it more difficult for an attacker to inject unathorized code on your site.
    To solve this issue, avoid using eval(), new Function(), setTimeout([string], ...) and setInterval([string], ...) for evaluating strings.
    If you absolutely must: you can enable string evaluation by adding unsafe-eval as an allowed source in a script-src directive.
    ⚠ Allowing string evaluation comes at the risk of inline script injection.
    1 directive
    Source location Directive Status
    script-src blocked

  • @Rabano94
    @Rabano94 ปีที่แล้ว

    thank you for the video! super clear!

  • @yasminbrandao3359
    @yasminbrandao3359 2 ปีที่แล้ว

    Nice explanation!
    tks for sharing

    • @jgoebel
      @jgoebel  2 ปีที่แล้ว

      Glad you liked it!

  • @ازاي-ث7خ
    @ازاي-ث7خ ปีที่แล้ว

    Thank you for such great video!

  • @MHamidAshraf
    @MHamidAshraf 9 หลายเดือนก่อน

    very nicely explained. thanks. i liked it.

    • @jgoebel
      @jgoebel  9 หลายเดือนก่อน

      Thanks for liking

  • @mindcontroller7136
    @mindcontroller7136 2 ปีที่แล้ว

    alert("Thank you, very clear explanation")

    • @jgoebel
      @jgoebel  2 ปีที่แล้ว

      haha nice 👍

  • @israelkayaba6002
    @israelkayaba6002 3 หลายเดือนก่อน

    Thanks bro !

  • @ToadyEN
    @ToadyEN 3 ปีที่แล้ว +1

    Handy overview, now to building a CSP 😳

    • @jgoebel
      @jgoebel  3 ปีที่แล้ว +1

      nice 👍

  • @codemadesimple1043
    @codemadesimple1043 ปีที่แล้ว

    Well explained 🎉 Are you from Denmark?

    • @jgoebel
      @jgoebel  ปีที่แล้ว +1

      no, I'm from Germany

  • @ashwinkumar4168
    @ashwinkumar4168 2 ปีที่แล้ว

    • @Barrosy
      @Barrosy ปีที่แล้ว

      Not literally like this. You have to replace and with your own directive and value you would like to use. Also make sure to separate these two placeholders with a space. So an example would be

  • @1haker
    @1haker ปีที่แล้ว

    Great video

    • @jgoebel
      @jgoebel  ปีที่แล้ว

      Glad you enjoyed it

  • @najaericsson71
    @najaericsson71 7 หลายเดือนก่อน

    Very good!

    • @jgoebel
      @jgoebel  6 หลายเดือนก่อน

      Thanks!

  • @exd0254
    @exd0254 2 ปีที่แล้ว

    thanks 4 the clear explanation

    • @jgoebel
      @jgoebel  2 ปีที่แล้ว

      Glad it was helpful!

  • @starindiangamer1322
    @starindiangamer1322 2 หลายเดือนก่อน +1

    alert('Hello World') only hello world

  • @ukaszkiepas57
    @ukaszkiepas57 5 หลายเดือนก่อน

    thank you buddy ! :)

    • @jgoebel
      @jgoebel  3 หลายเดือนก่อน

      You're most welcome!

  • @sanketmaske74
    @sanketmaske74 3 ปีที่แล้ว

    Very well explained.... thanks

    • @jgoebel
      @jgoebel  3 ปีที่แล้ว

      thx Sanket 👍

  • @1bigslug
    @1bigslug 3 ปีที่แล้ว

    Thank you for the video!!

    • @jgoebel
      @jgoebel  3 ปีที่แล้ว

      My pleasure!

  • @none0n
    @none0n 2 ปีที่แล้ว

    Great video, do you have a video with some in-depth code examples?

  • @ricardonacif5426
    @ricardonacif5426 11 หลายเดือนก่อน

    Man you look like young Elon Musk lol. Congratz on the content btw!

  • @ABDULKARIMHOMAIDI
    @ABDULKARIMHOMAIDI 8 หลายเดือนก่อน

    Thanks man !!

    • @jgoebel
      @jgoebel  5 หลายเดือนก่อน

      you're welcome

  • @chadbosch1110
    @chadbosch1110 3 ปีที่แล้ว

    Hey, Is there a secure way in storing/using JWT with CORS to prevent XSS? Hosted Client and Server Separately so can't do httponly. Just wondering if you have any material I could look at.

    • @jgoebel
      @jgoebel  3 ปีที่แล้ว

      Hi Chad,
      if you store a JWT inside of a cookie then your api-gateway needs a strict CORS policy and ideally HttpOnly and Secure cookies to prevent CSRF. However, CORS and cookies do not sufficiently protect you against XSS. Because with XSS some malicious code is running in browser. So in case the JWT is stored in a cookie - even if it is HttpOnly - the attacker can still make authenticated requests. The only "advantage" over using local storage here is that the attacker would need to run the full attack over the browser. This is still bad and the attacker can do pretty much anything he wants to do but at least the attacker does not get access to the actual token. So while the attacker could still do everything via the browser, it would be slightly harder.
      To protect against XSS, a Content Security Policy is very useful as well as sanitizing user input when it is sent to the server. I think I don't really have a dedicated video that yet.

  • @johnnyforget1494
    @johnnyforget1494 3 ปีที่แล้ว

    So I've read that putting the CSP in html meta tags isn't super effective and frame ancestors can't be used. What are your thoughts on this?

    • @jgoebel
      @jgoebel  3 ปีที่แล้ว

      Hi Johnny, here is a really nice answer for your question: webmasters.stackexchange.com/questions/104857/when-should-i-not-to-use-page-meta-security-headers

  • @yuvrajagarkar8942
    @yuvrajagarkar8942 2 ปีที่แล้ว

    but what if some hacker sniffs the traffic and manipulates the request and response headers ? , is that possible if used https ?

    • @jgoebel
      @jgoebel  2 ปีที่แล้ว +1

      Hi Yuvraj, https is TLS over HTTP and all headers that can be encrypted, are encrypted (hostname / IP headers are not encrypted because otherwise routing of the package would be impossible: stackoverflow.com/a/187679/2328833)

  • @neeerajtk
    @neeerajtk ปีที่แล้ว

    Can we set CSP in AWS?

    • @jgoebel
      @jgoebel  ปีที่แล้ว

      CSP is independent of any cloud service

  • @sauravkarmakar1811
    @sauravkarmakar1811 3 ปีที่แล้ว

    I used csp script-src to self..and in console it showing many script error...how can i make it accept all my script ?

    • @jgoebel
      @jgoebel  3 ปีที่แล้ว

      Hi Saurav, while you could allow any script this would defeat the purpose of having a CSP in the first place. So I figure the only way would be to explicitly add the sources where you want to load scripts from. If you specify self, then this means that you only allow scripts to come from the origin where the webpage was originally loaded from

    • @sauravkarmakar1811
      @sauravkarmakar1811 3 ปีที่แล้ว

      @@jgoebel how can i make it accept the scripts that i have written on some script tags inside some pages?

  • @markomilardic
    @markomilardic ปีที่แล้ว

    Great :)

    • @jgoebel
      @jgoebel  ปีที่แล้ว

      Thanks!

  • @Raj0x01
    @Raj0x01 2 ปีที่แล้ว

    Can anyone explain: "Browsers that don't support CSP still work with servers that implement it" ?

    • @jgoebel
      @jgoebel  2 ปีที่แล้ว +1

      no because the browser enforces the CSP. But pretty much every modern browser supports CSP these days

    • @Raj0x01
      @Raj0x01 2 ปีที่แล้ว

      Thanks

  • @yamansharma9344
    @yamansharma9344 3 ปีที่แล้ว

    I guess I have seen cross site scripting policies added in web.config files 🤔

    • @jgoebel
      @jgoebel  3 ปีที่แล้ว +1

      could be. Some servers allow you to just pass a config file and then the server will generate the headers for you

  • @KareenKreis-q9c
    @KareenKreis-q9c 2 หลายเดือนก่อน

    Rebekah Prairie

  • @mr.RAND5584
    @mr.RAND5584 2 หลายเดือนก่อน

    alert('test')

  • @panchalnitin
    @panchalnitin 2 ปีที่แล้ว

    Write down the code mentioned in the video, and then try to edit the comment, TH-cam will delete it!

    • @jgoebel
      @jgoebel  2 ปีที่แล้ว

      probably because TH-cam thinks that you are trying to do a stored cross site scripting (XSS) attack 😁

  • @nithiyashrees3456
    @nithiyashrees3456 2 หลายเดือนก่อน

  • @freewhitesparrow6205
    @freewhitesparrow6205 ปีที่แล้ว

    Is it Elon Mask?

  • @nIrUbU01
    @nIrUbU01 2 ปีที่แล้ว

    doesnt really explain anything, all youre saying is "if you have this header youre protected" - great.

  • @nithiyashrees3456
    @nithiyashrees3456 2 หลายเดือนก่อน

    dd

  • @BearkFearGamer
    @BearkFearGamer ปีที่แล้ว

    alert(document.cookie)

    • @jgoebel
      @jgoebel  ปีที่แล้ว +1

      nice try 😁