A while ago, I tried to embed a youtube video on my website. It gave me an error: that its X-frame-options was set to sameorigin and therefore could not load. After some research I learned that X-frame-options was an attribute which controlled whether a webpage could be embedded onto a different webpage. How can I set the X-frame-options header in my javascript code on my webpage? If this is not possible, please may you guide me to how I could control this on the server side?
With JavaScript? You can't.
Setting X-Frame-Options inside the
<meta>element is useless! For instance,<meta http-equiv="X-Frame-Options" content="deny">has no effect. Do not use it! X-Frame-Options works only by setting through the HTTP header,
It can only be done from the server.
From the server, it's simple - just don't set such a header to begin with. For the header to be sent, you have to do so explicitly, so if you leave out code that sets the header, the header won't be sent. (Though, note that there are some services like Helmet that alter headers for you - it depends what you're using. Figure out what you have, if it's setting headers, and then use whatever the appropriate command is to not send such headers.)
X-Frame-Options is a response header i.e. it is sent back to you from the server you're making the request to (in this case youtube), it's not something you can change via javascript. You can get HTML code for embedding a youtube video from that youtube video's page. If you go there and click on the Share button, there is an Embed option which gives you the code required. Using the code provided should get around the X-Frame-Options issue.
See https://support.google.com/youtube/answer/171780?hl=en for more info about embedding videos from google's support docs.
See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options for details about the X-Frame-Options header.