Can you explain expectations and proper usage for applying CORS filter and adding contentSecurityPolicyHeaderValue?

[timantmedia]

I can use the contentSecurityPolicyHeaderValue to restrict domains from embedding my live streams using the embedded code, but enabling the CORS filter does not restrict the embed code or WebRTC publishing.

What exactly are the expectations and usage examples for each?

[USAMAWIZARD]

Credited : @mekya
Answer was originally posted here

Thank you for the question. I think the proper way for doing that is using some kind of tokens to let the stream playable only on your site. You'll just add the token to the iframe url. If this kind of solution works for you, check this out -> https://resources.antmedia.io/docs/stream-security

If you don't want to use tokens, please continue reading

The alternative solution is a little tricky. I mean we prevent embedding the frames and allowing to access the resources through CORS. The solution is using HTTP Header Security Filter and CORS Filter . In this solution, you need to use JS SDK to play the stream on your website/domain.

Note: Keep in mind that ALLOW-FROM as an antiClickJackingOption is not supported by modern browsers

There are mainly two main steps. Firstly, Http Header Security Filter will prevent embedding the content to any other website and secondly, CORS filter will allow your web app access the resources on the Ant Media Server side. Here is the step by step instructions

1. Put the following lines to your application's web.xml (/usr/local/antmedia/webapps/{YOUR_APP}/WEB-INF/web.xml)

<filter>
    <filter-name>httpHeaderSecurity</filter-name>
    <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
    <async-supported>true</async-supported>
 </filter>
<filter-mapping>
  <filter-name>httpHeaderSecurity</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

2. Configure the CORS filter as mentioned here. Assume that we'll only allow https://test.antmedia.io:5443 can access the resources. Then we need to edit the default CORS filter in application's web.xml (/usr/local/antmedia/webapps/{YOUR_APP}/WEB-INF/web.xml) as follows. Keep in mind that there is a CORS filter in the web.xml. You just need to edit to appear like below

  <filter>
     <filter-name>CorsFilter</filter-name>
      <filter-class>io.antmedia.filter.CorsHeaderFilter</filter-class>
      <init-param>
          <param-name>cors.allowed.origins</param-name>
          <param-value>https://test.antmedia.io:5443/</param-value>
       </init-param>
       <init-param>
              <param-name>cors.allowed.methods</param-name>
              <param-value>GET,POST,HEAD,OPTIONS,PUT,DELETE</param-value>
       </init-param>
        <init-param>
            <param-name>cors.support.credentials</param-name>
            <param-value>true</param-value>
         </init-param>
         <init-param>
            <param-name>cors.allowed.headers</param-name>
            <param-value>Accept, Origin, X-Requested-With, Access-Control-Request-Headers, Content-Type, Access-Control-Request-Method, Authorization</param-value>
         </init-param>
        <async-supported>true</async-supported>
  </filter>
    <filter-mapping>
            <filter-name>CorsFilter</filter-name>
            <url-pattern>/*</url-pattern>
    </filter-mapping>

3. Restart the server

  sudo service antmedia restart

4. Right now, your webapp in test.antmedia.io can play the stream. Keep in mind that embedding the content will not work anywhere including test.antmedia.io. Only the webapp in test.antmedia.io can access the resources on the origin. You can implement web player by through WebRTC Playing samples. For instance just open the /usr/local/antmedia/webapps/{YOUR_APP}/player.html and initialize WebRTCAdaptor like this

   ...
  var webRTCAdaptor = new WebRTCAdaptor({
		websocket_url : 'wss://{YOUR_ORIGIN}:{PORT}/{YOUR_APP}/websocket',
		mediaConstraints : mediaConstraints,
		peerconnection_config : pc_config,
  .....