Ugacomp

Solved: Protect Ant Media Streams from getting embedded

Where necessary, you may need to have access to a VPS server so you can follow how to implement the steps in this article.  You can get a cheaper VPS Server from Contabo with 4vCPU cores, 8GM RAM, and 32TB Bandwidth for less than $5.50 per month. Get this deal here now

Table of Contents

Cloud VPS S

$5.50 Monthly
  • 4 vCPU Cores | 8GB RAM

CLOUD VPS M

$15.50 Monthly
  • 6 vCPU Cores | 16GB RAM

CLOUD VPS L

$17.50 Monthly
  • 8 vCPU Cores | 24GB RAM

Unprotected Ant media streams are vulnerable to being embedded on unauthorized websites. And this can prove to be a serious issue for your streaming business. The fact that unscrupulous actors are willing to exploit your server resources, and even steal your content can prove to be costly to you in many ways. When someone illegally embeds your streaming content on their platforms, it’s going to deplete your server resources. This means that you will be paying double the costs compared to the original price you would incur if your ant media streams were well-secured and protected.

RECOMMENDED READING: How to install Ant Media Server on VPS

The impact could be so massive, especially if you’re running Ant Media as a business. And you will end up with unprecedented losses as the server costs could double or triple in a short period of time.

While you struggle to pay the price, the illicit players will keep raking in profits from your investment; because they’re not investing money to cater to server costs.

So, the question is: what can you do about it?

Well, there is a couple of ways to go about this issue so you can prevent untheorized third parties from embedding your ant media streams on their websites. In this article, we will help you to understand everything you need to know.

RECOMMENDED READING: How to set up Nginx RTMP Server on Ubuntu to Live stream videos

Old Ant Media editions & New Ant Media editions

To successfully secure your Ant media streams so unauthorized parties can’t embed them on their websites, it will depend on the version of Ant Media server you’re running. In other words, the techniques to do it will vary depending on what version of the Ant Media server you’re using. Let’s break it down!

First, how do you check for your current Ant Media server version?

You can check for the version of your Ant media server by logging into your Ant media admin web panel and then scrolling down to the bottom as seen in the image below.

Solved: Protect Ant Media Streams from getting embedded

You can see that in the above image, the installed Ant Media server is running the free community edition v2.5.2. Similarly, if you had the paid edition of Ant Media, it would be shown as enterprise edition 2.5.2.

Securing Ant Media v2.4.3 & below

If you’re running Ant Media v2.4.3 or below, you can secure your streams from unauthorized third-party websites by following these steps.

  • Using HTTP Header Security Filter and CORS Filter

This method involves configuring the HTTP Header Security Filter, which is used to block unauthorized users from embedding your content on their sites. Then, you will also configure the CORS Filter that can enable your stream application to access the resources on the Ant Media Server.

So, we can first configure the HTTP Header Security Filter by finding your application’s web.xml file which is usually located under the following directory path on the server:

/usr/local/antmedia/webapps/YOUR_APP/WEB-INF/web.xml

Make sure you replace YOUR_APP with the actual name of your Ant media streaming application. You can confirm the name of your application which contains your streams by going to your Ant media admin web panel and clicking Dashboard and scrolling down or clicking on applications located on the left-side pane inside the admin interface. See the image below;

Solved: Protect Ant Media Streams from getting embedded

Assuming that you’ve found your application’s web.xml file, you can open it using your preferred editor on the server and then paste in the following lines;

<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>

For configuring the HTTP Header Security Filter, the above code is all you need to insert.

RECOMMENDED READING: How much does Ant Media cost to stream to 1000 viewers on AWS?

The next step is to configure the CORS Filter. This can also be done by going to your stream application’s web.xml file and doing a little bit of editing in the code.
In fact, you need to find the CORS filter code in the application’s web.xml file which should look as follows;

  <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>*</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>

In the above code, we need to add custom lines with our own parameter values, similar and below the following lines;

<param-name>cors.allowed.origins</param-name>
<param-value>TARGET_URL</param-value>

The image below shows where the above lines are found in the CORS Filter snippet

Solved: Protect Ant Media Streams from getting embedded

Below these lines, you can add your parameter values that define your target URL using the following sample code;

<param-value>TARGET_URL</param-value>

All you have to do is to replace TARGET_URL with your domain URL. Assuming that you only want to allow ugacomp.com to be able to access Ant Media resources, the parameter value would be as follows:

<param-value>https://www.ugacomp.com/</param-value>

Once you’ve done all the editing and configurations, you will need to restart your Ant Media server by running the following command on your SSH terminal;

  sudo service antmedia restart

Please know that your webapp in TARGET_URL will be able to play the stream, but embedding the content using the same target domain will not be able to work. This means that the only webapp attached to the defined TARGET_URL can access the resources on the origin. You can implement the web player through WebRTC Playing samples. You can initialize the WebRTCAdaptor, which can be done by editing the player.html file of your application located in the following path

/usr/local/antmedia/webapps/{YOUR_APP}/player.html

In this file, we will need to add the following lines of code:

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

RECOMMENDED READING: How can I enable Adaptive Bitrate streaming in Ant Media Server?

  • Using Nginx Reverse proxy

The other method you can use to secure your streams is to configure the Nginx reverse proxy. In this scenario, we will not be able to show you the step-by-step process of setting up Nginx reverse proxy from scratch. But if you already have it running or you know how to set it up, have to edit the nginx.conf file and add the following lines of code:

events {
    worker_connections 1048576;
    multi_accept on;
    use epoll;
}

http{
server { 
            add_header Content-Security-Policy "frame-ancestors 'self' https://whitelist-domain-name;";
            listen 443 ssl;
            ssl_certificate /etc/letsencrypt/live/your-domain-name/fullchain.pem;
            ssl_certificate_key /etc/letsencrypt/live/your-domain-name/privkey.pem;
            server_name your-domain-name;

            location / {
                proxy_pass http://your--ams-server-ip:5080/;
                proxy_http_version 1.1;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $host;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";

            }
        }
} 

Now, we need to add a content security policy, enabling us to whitelist the defined domain names allowed to embed our streams. This can be done under the following lines as seen in the image below;

Solved: Protect Ant Media Streams from getting embedded

You will have to make sure the following lines of code are added to your nginx.conf file as shown in the image above;

add_header Content-Security-Policy "frame-ancestors 'self' WHITELISTED_DOMAIN

Please make sure you replace WHITELISTED_DOMAIN with the actual domain name, you want to be whitelisted so it can embed your Ant media streams. Assuming the domain name you want to whitelist is ugacomp.com, the code would look like as seen below;

add_header Content-Security-Policy "frame-ancestors 'self' https://www.ugacomp.com/

RECOMMENDED READING: How to use DASH & HLS Protocols in Nginx RTMP streaming

Upgrading the older Ant media version to the newest version

Alternatively, you can choose to upgrade from the older version of Ant Media to the newest version. This comes with extra benefits like leveraging the new features that are not present in the older editions. To upgrade to the newest version of Ant Media server, you will need to first download the newest version of the software. If you’re running the community edition, then you will have to find the newest releases on their GitHub repo here. On the other hand, if you have the enterprise edition, you will need to log into your purchase account find the newest releases, and then download the software on your server.

Basically, to download the Ant media software on the server, you can use wget command followed by the Ant media download URL. Assuming, you’re going to download it from their GitHub repo, then the following would be the sample command you can run to download Ant Media Server Community v2.6.2

wget https://github.com/ant-media/Ant-Media-Server/releases/download/ams-v2.6.2/ant-media-server-community-.zip

You will also have to download the Ant Media installation script, install_ant-media-server.sh by running the following command;

wget https://raw.githubusercontent.com/ant-media/Scripts/master/install_ant-media-server.sh && chmod 755 install_ant-media-server.sh

Make sure both the Ant media software, packaged in a zip file and the installation script are downloaded in the same directory path.

To upgrade, you will need to run the following command on your SSH terminal;

sudo ./install_ant-media-server.sh -i ANT_MEDIA_SERVER_INSTALLATION_FILE -r true

Please replace ANT_MEDIA_SERVER_INSTALLATION_FILE with the actual name of the zip file that contains the newest version of Ant Media, you’ve downloaded on your server. In this example, our zip file is named ant-media-server-community-.zip. And so, the actual upgrade or update command would be as seen below;

sudo ./install_ant-media-server.sh -i ant-media-server-community-.zip -r true

As usual, you will need to restart Ant Media server by running the following command:

  sudo service antmedia restart

RECOMMENDED READING: How to Embed Ant Media Player in WordPress Website

Securing Ant Media v2.5.0 and above

Now, if you’re running Ant Media Server v2.5.0 and above, the process of preventing untheorized third-party websites from embedding your Ant media streams should be a lot easier compared to doing it when you’re running the older version.

All you need to do is to go to your application directory path and find the red5-web.properties file. This file is actually located under the following path;

/usr/local/antmedia/webapps/YOUR_APP/WEB-INF/red5-web.properties

As always, make sure you replace YOUR_APP with the actual name of your Ant media streaming application.

Now, you need to open the red5-web.properties file using your preferred editor and then add the following line of code;

settings.contentSecurityPolicyHeaderValue=frame-ancestors 'self' ALLOWED_DOMAIN

All you need to do is to replace ALLOWED_DOMAIN with the actual domain, you want to be whitelisted for the streams to be embedded on it. This means that only defined or specified domains will be able to embed your streams. Assuming you want to whitelist the ugacomp.com website, then the line of code should be as follows:

settings.contentSecurityPolicyHeaderValue=frame-ancestors 'self' https://www.ugacomp.com

Also, you can whitelist multiple domains by just adding space as seen below:

settings.contentSecurityPolicyHeaderValue=frame-ancestors 'self' https://www.ugacomp.com https://domain2.com https://domain3.com

If you want to learn more about securing your Ant media server, here is another article we wrote that details more steps to take on this topic

More Ant Media Server articles to explore

Hire us to handle what you want

Hire us through our Fiverr Profile and leave all the complicated & technical stuff to us. Here are some of the things we can do for you:

  • Website migration, troubleshooting, and maintenance.
  • Server & application deployment, scaling, troubleshooting, and maintenance
  • Deployment of Kubernetes, Docker, Cloudron, Ant Media, Apache, Nginx,  OpenVPN, cPanel, WHMCS, WordPress, and more
  • Everything you need on AWS, IBM Cloud, GCP, Azure, Oracle Cloud, Alibaba Cloud, Linode, Contabo, DigitalOcean, Ionos, Vultr, GoDaddy, HostGator, Namecheap, DreamHost, and more.
 

We will design, configure, deploy, or troubleshoot anything you want. Starting from $10, we will get your job done in the shortest time possible. Your payment is safe with Fiverr as we will only be paid once your project is completed.