For security reasons regarding CORS, your hosted instance of Materialious must serve as the value for the Access-Control-Allow-Origin
header on Invidious.
Invidious doesn't provide a simple way to modify CORS, so this must be done with your reverse proxy.
invidious.example.com {
@cors_preflight {
method OPTIONS
}
respond @cors_preflight 204
header Access-Control-Allow-Credentials true
header Access-Control-Allow-Origin "https://materialious.example.com" {
defer
}
header Access-Control-Allow-Methods "GET,POST,OPTIONS,HEAD,PATCH,PUT,DELETE"
header Access-Control-Allow-Headers "User-Agent,Authorization,Content-Type"
reverse_proxy localhost:3000
}
materialious.example.com {
reverse_proxy localhost:3001
}
server {
listen 80;
server_name invidious.example.com;
location / {
if ($request_method = OPTIONS) {
return 204;
}
proxy_hide_header Access-Control-Allow-Origin;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin "https://materialious.example.com" always;
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, HEAD, PATCH, PUT, DELETE" always;
add_header Access-Control-Allow-Headers "User-Agent, Authorization, Content-Type" always;
proxy_pass http://localhost:3000;
}
}
server {
listen 80;
server_name materialious.example.com;
location / {
proxy_pass http://localhost:3001;
}
}
- Tab: Details - Create a new proxy host with SSL on (Let's Encrypt or your own certificate).
- Tab: Custom locations, fill in IP and port. Click gear icon to add some security headers.
Add:
if ($request_method = OPTIONS) {
return 204;
}
proxy_hide_header Access-Control-Allow-Origin;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin "https://materialious.example.com" always;
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, HEAD, PATCH, PUT, DELETE" always;
add_header Access-Control-Allow-Headers "User-Agent, Authorization, Content-Type" always;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $http_connection;
proxy_http_version 1.1;
- Click Save.
Add this middleware to your Invidious instance:
http:
middlewares:
materialious:
headers:
accessControlAllowCredentials: true
accessControlAllowOriginList: "https://materialious.example.com"
accessControlAllowMethods:
- GET
- POST
- OPTIONS
- HEAD
- PATCH
- PUT
- DELETE
accessControlAllowHeaders:
- User-Agent
- Authorization
- Content-Type
Please open a PR request or issue if you implement this in a different reverse proxy.
The following Invidious values must be set in your config.
domain:
- The reverse proxied domain of your Invidious instance.https_only: true
- Must be set if you are using HTTPS.external_port: 443
- Must be set if you are using HTTPS.
Please ensure you have followed the previous steps before doing this!
version: "3"
services:
materialious:
image: wardpearce/materialious:latest
restart: unless-stopped
ports:
- 3001:80
environment:
# No trailing backslashes!
# URL to your proxied Invidious instance
VITE_DEFAULT_INVIDIOUS_INSTANCE: "https://invidious.materialio.us"
# URL TO RYD
# Leave blank to disable completely.
VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE: "https://returnyoutubedislikeapi.com"
# URL to Sponsorblock
# Leave blank to completely disable sponsorblock.
VITE_DEFAULT_SPONSERBLOCK_INSTANCE: "https://sponsor.ajay.app"
# URL to DeArrow
VITE_DEFAULT_DEARROW_INSTANCE: "https://sponsor.ajay.app"
# URL to DeArrow thumbnail instance
VITE_DEFAULT_DEARROW_THUMBNAIL_INSTANCE: "https://dearrow-thumb.ajay.app"
# Look at "Overwriting Materialious defaults" for all the accepted values.
VITE_DEFAULT_SETTINGS: '{"themeColor": "#2596be"}'
Materialious allows you to overwrite the default values using VITE_DEFAULT_SETTINGS
{
// Set to true to enable dark mode, or false to disable it.
"darkMode": true,
// Force case for Videos/Playlists etc.
"forceCase": "uppercase | lowercase | sentence case | title case",
// Any ISO 3166 country code
"region": "US",
// Specifies the theme color in hexadecimal format (e.g., #ff0000 for red).
"themeColor": "#ff0000",
// Set to true to enable autoplay, or false to disable it.
"autoPlay": false,
// Set to true to always loop videos, or false to loop only when specified.
"alwaysLoop": false,
// Set to true to proxy videos, or false to play them directly.
"proxyVideos": true,
// Set to true to enable listening by default, or false to disable it.
"listenByDefault": true,
// Set to true to save playback position, or false to reset it.
"savePlaybackPosition": true,
// Set to true to enable DASH playback, or false to use other formats.
"dashEnabled": true,
// Set to true to enable theatre mode by default, or false to disable it.
"theatreModeByDefault": false,
// Set to true to autoplay next video by default, or false to disable it.
"autoplayNextByDefault": true,
// Set to true to return YouTube dislikes, or false to hide them.
"returnYtDislikes": false,
// Set to true to enable search suggestions, or false to disable them.
"searchSuggestions": true,
// Set to true to preview video on hover, or false to disable it.
"previewVideoOnHover": true,
// Set to true to enable sponsor block, or false to disable it.
"sponsorBlock": false,
// Specifies the categories for sponsor block as comma-separated values.
// https://wiki.sponsor.ajay.app/w/Types
"sponsorBlockCategories": "sponsor,interaction",
// Set to true to enable deArrow, or false to disable it.
"deArrowEnabled": true,
// Set to true to enable mini player, or false to disable it.
"playerMiniPlayer": true,
// Set to true to enable syncious, or false to disable it.
"syncious": true,
}
Add the following to your docker compose file.
tor-proxy:
image: 1337kavin/alpine-tor:latest
restart: unless-stopped
environment:
- tors=15
ryd-proxy:
image: 1337kavin/ryd-proxy:latest
restart: unless-stopped
depends_on:
- tor-proxy
environment:
- PROXY=socks5://tor-proxy:5566
ports:
- 3003:3000
ryd-proxy:
image: 1337kavin/ryd-proxy:latest
restart: unless-stopped
ports:
- 3003:3000
Reverse proxy RYD-Proxy.
ryd-proxy.example.com {
header Access-Control-Allow-Origin "https://materialious.example.com" {
defer
}
header Access-Control-Allow-Methods "GET,OPTIONS"
reverse_proxy localhost:3003
}
server {
listen 80;
server_name ryd-proxy.example.com;
location / {
add_header Access-Control-Allow-Origin "https://materialious.example.com" always;
add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
proxy_pass http://localhost:3003;
}
}
Add this middleware to your RYD-Proxy instance:
http:
middlewares:
ryd-proxy:
headers:
accessControlAllowOriginList: "https://materialious.example.com"
accessControlAllowMethods:
- GET
- OPTIONS
Modify/add VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE
for Materialious to be the reverse proxied URL of RYD-Proxy.
Please note, Materialious configuration using the env var VITE_DEFAULT_SYNCIOUS_INSTANCE
for Invidious API extended, this will change in the future (no-breaking.)
Add the following to your docker compose
services:
api_extended:
image: wardpearce/invidious_api_extended:latest
restart: unless-stopped
ports:
- 3004:80
environment:
api_extended_postgre: '{"host": "invidious-db", "port": 5432, "database": "invidious", "user": "kemal", "password": "kemal"}'
api_extended_allowed_origins: '["https://materialios.example.com"]'
api_extended_debug: false
# No trailing backslashes!
api_extended_invidious_instance: "https://invidious.example.com"
api_extended_production_instance: "https://syncious.example.com"
Add these additional environment variables to Materialious.
VITE_DEFAULT_SYNCIOUS_INSTANCE: "https://syncious.example.com"
Add these additional environment variables to Materialious.
# Will differ depending on how you self-host peerjs.
VITE_DEFAULT_PEERJS_HOST: "peerjs.example.com"
VITE_DEFAULT_PEERJS_PATH: "/"
VITE_DEFAULT_PEERJS_PORT: 443