fix CORS and CSP

lib/AppInfo/Application.php

@@ -4,6 +4,7 @@ declare(strict_types=1);
 
 namespace OCA\Radio\AppInfo;
 
+use OC\Security\CSP\ContentSecurityPolicy;
 use OCA\Radio\Search\SearchProvider;
 use OCP\AppFramework\App;
 use OCP\AppFramework\Bootstrap\IBootContext;
@@ -30,8 +31,24 @@ class Application extends App implements IBootstrap {
 			return $c->get(IRequest::class);
 		});
 
+		$this->registerCsp();
+
 	}
 
 	public function boot(IBootContext $context): void {
 	}
+
+	/**
+	 * Allow radio-browser hosts in the csp
+	 *
+	 * @throws \OCP\AppFramework\QueryException
+	 */
+	public function registerCsp() {
+		$manager = $this->getContainer()->getServer()->getContentSecurityPolicyManager();
+		$policy  = new ContentSecurityPolicy();
+		$policy->addAllowedConnectDomain('https://de1.api.radio-browser.info');
+		$policy->addAllowedImageDomain('*');
+		$policy->addAllowedMediaDomain('*');
+		$manager->addDefaultPolicy($policy);
+	}
 }

package.json

@@ -37,6 +37,7 @@
 		"@nextcloud/router": "^1.2.0",
 		"@nextcloud/vue": "^2.9.0",
 		"@nextcloud/vue-dashboard": "^1.0.1",
+		"axios": "^0.21.0",
 		"howler": "^2.2.1",
 		"music-metadata": "^7.5.0",
 		"style-loader": "^2.0.0",

src/components/Main.vue

@@ -45,6 +45,7 @@ import Sidebar from './Sidebar'
 import { Howl, Howler } from 'howler'
 
 let audioPlayer = null
+const requesttoken = axios.defaults.headers.requesttoken
 
 export default {
 	name: 'Main',
@@ -187,6 +188,7 @@ export default {
 						codec: station.codec.toString(),
 						tags: station.tags.toString(),
 					}
+					axios.defaults.headers.requesttoken = requesttoken
 					await axios
 						.post(generateUrl('/apps/radio/api/favorites'), stationMap)
 						.then(response => {
@@ -242,6 +244,7 @@ export default {
 
 			/* Count click */
 			try {
+				delete axios.defaults.headers.requesttoken
 				axios.get(this.$apiUrl + '/json/url/' + station.stationuuid)
 			} catch (error) {
 				showError(t('radio', 'Unable to count play on remote API'))
@@ -268,6 +271,7 @@ export default {
 					codec: station.codec.toString(),
 					tags: station.tags.toString(),
 				}
+				axios.defaults.headers.requesttoken = requesttoken
 				await axios
 					.post(generateUrl('/apps/radio/api/recent'), stationMap)
 			} catch (error) {
@@ -369,6 +373,11 @@ export default {
 			}
 
 			try {
+				if (menuState === 'FAVORITES' || menuState === 'RECENT') {
+					axios.defaults.headers.requesttoken = requesttoken
+				} else {
+					delete axios.defaults.headers.requesttoken
+				}
 				await axios.get(queryURI, {
 					params: vm.queryParams,
 				})
@@ -407,9 +416,9 @@ export default {
 		},
 		loadSettings() {
 
-			axios.defaults.headers.common = {
+			// axios.defaults.headers.common = {
-				'User-Agent': 'Nextcloud Radio App/' + this.$version,
+			// 'User-Agent': 'Nextcloud Radio App/' + this.$version,
-			}
+			// }
 			this.$store.dispatch('getVolumeState')
 
 		},
@@ -417,6 +426,7 @@ export default {
 		async loadFavorites() {
 			const vm = this
 			try {
+				axios.defaults.headers.requesttoken = requesttoken
 				await axios.get(generateUrl('/apps/radio/api/favorites'))
 					.then(function(response) {
 						const favorites = []