How to protect video and photos from folder

5

@TheDancingCode, Thanks! That looks promising…

Important learnings (for me at least):

  • Contrary to my previous post, Grav does intercept requests to media when the url does not contain the file path. Meaning:

    localhost/user/pages/03.video/big_buck_bunny.mp4 --> No interception by Grav
localhost/video/big_buck_bunny.mp4               --> Grav intercepts and can control access

  • Another important learning is a setting of the login plugin in user/config/plugins/login.yaml:

    protect_protected_page_media: true

    This setting will deny access to media files inside a folder under access control. But, as said, only when the url to the media is relative and does not contain the path.

To give it a spin, I did the following in a fresh Grav 1.6.23 + Admin installation:

  • Created a new page 03.video/default.md with the following in the header:
    access:
  site.login: true
  admin.login: true
    and the following content:
    ![](big_buck_bunny.mp4)

![](http://dev-dev/video/big_buck_bunny.mp4)

<video controls controlsList="nodownload"> ** see notes at bottom
   <source src="/video/big_buck_bunny.mp4">
   Your browser does not support the video tag.
</video>
  • Added ‘big_buck_bunny.mp4’ to the folder of page 03.video/default.md
  • Added the following to /user/config/plugins/login.yaml:
    protect_protected_page_media: true

Results embedding video via Markdown:

  • After logging in, all three videos were shown, but with an important difference:
    • When using the markdown code ![name](url), a url with a path is generated: /user/pages/03.video/big_buck_bunny.mp4.
      The user can now copy the url and access the video without being logged in.
    • Only the handcrafted <video> element shows a url without the path.

Adding video using Twig:

  • I tried the following 2 ways to embed the video into the page:
    {{ page.media['big_buck_bunny.mp4'].html }}

<video controls controlsList="nodownload">  ** see notes at bottom
    <source src="{{ page.url~'/'~page.media['big_buck_bunny.mp4'].filename }}">
</video>
    • The first option again generated a url based on the path to the file.
    • The <video> element has to be handcrafted again using the second option.

Further notes:

  • The HTML5 <video> element allows the user to download the video. This can be switched of in Chrome (chromium-based) browsers, which is approx 66% of the user base.
    • There are other solutions, see this (old) answer on stackoverflow.
  • If user happens to know the folder structure the user could reproduce the path to the video and access it without logging in.
  • The above settings make it harder for the user to copy the video, but does not block the other options to grab/capture the video.

Any suggestions/approvements are welcome!