cordova - plugin - content security policy phonegap
Error "No se ha encontrado la metaetiqueta Política de seguridad de contenido" en mi aplicación de teléfono (5)
Después de actualizar Cordova 5.0 en mi sistema, creo nuevas aplicaciones. Cuando probé mi aplicación en un dispositivo esa vez, recibí un error en el registro de la consola:
No Content-Security-Policy meta tag found.
Please add one when using the Cordova-plugin-whitelist plugin.: 23.
Agrego meta en la sección de cabecera
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src ''self'' ''unsafe-inline''; script-src: ''self'' ''unsafe-inline'' ''unsafe-eval''>
Pero nuevamente, obtuve el mismo error, en la aplicación que uso el complemento del navegador integrado en la aplicación y en otros 7 enlaces de sitios web.
Debe agregar una metaetiqueta CSP en la sección principal del
index.html
de su aplicación
Según https://github.com/apache/cordova-plugin-whitelist#content-security-policy
Política de seguridad de contenido
Controla qué solicitudes de red (imágenes, XHR, etc.) pueden realizarse (a través de la vista web directamente).
En Android e iOS, la lista blanca de solicitudes de red (ver arriba) no puede filtrar todos los tipos de solicitudes (por ejemplo,
<video>y WebSockets no están bloqueados). Por lo tanto, además de la lista blanca, debe usar una etiqueta<meta>Política de seguridad de contenido en todas sus páginas.En Android, el soporte para CSP dentro de la vista web del sistema comienza con KitKat (pero está disponible en todas las versiones que usan Crosswalk WebView).
Aquí hay algunos ejemplos de declaraciones CSP para sus páginas
.html:
<!-- Good default declaration: * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this: * Enable inline JS: add ''unsafe-inline'' to default-src * Enable eval(): add ''unsafe-eval'' to default-src --> <meta http-equiv="Content-Security-Policy" content="default-src ''self'' data: gap: https://ssl.gstatic.com; style-src ''self'' ''unsafe-inline''; media-src *"> <!-- Allow requests to foo.com --> <meta http-equiv="Content-Security-Policy" content="default-src ''self'' foo.com"> <!-- Enable all requests, inline styles, and eval() --> <meta http-equiv="Content-Security-Policy" content="default-src *; style-src ''self'' ''unsafe-inline''; script-src ''self'' ''unsafe-inline'' ''unsafe-eval''"> <!-- Allow XHRs via https only --> <meta http-equiv="Content-Security-Policy" content="default-src ''self'' https:"> <!-- Allow iframe to https://cordova.apache.org/ --> <meta http-equiv="Content-Security-Policy" content="default-src ''self''; frame-src ''self'' https://cordova.apache.org">
Después de agregar github.com/apache/cordova-plugin-whitelist , debe indicarle a su aplicación que permita el acceso a todos los enlaces de páginas web o enlaces específicos, si desea mantenerlo específico.
Simplemente puede agregar esto a su config.xml , que se puede encontrar en el directorio raíz de su aplicación:
Recomendado en la documentación:
<allow-navigation href="http://example.com/*" />
o:
<allow-navigation href="http://*/*" />
De la documentación del complemento:
Lista blanca de navegación
Controla a qué URL se puede navegar el WebView. Se aplica solo a las navegaciones de nivel superior.
Quirks: en Android también se aplica a iframes para esquemas que no son http.
De forma predeterminada, solo se permiten navegaciones a file: // URL. Para permitir otras otras URL, debe agregar etiquetas a su config.xml:
<!-- Allow links to example.com --> <allow-navigation href="http://example.com/*" /> <!-- Wildcards are allowed for the protocol, as a prefix to the host, or as a suffix to the path --> <allow-navigation href="*://*.example.com/*" /> <!-- A wildcard can be used to whitelist the entire network, over HTTP and HTTPS. *NOT RECOMMENDED* --> <allow-navigation href="*" /> <!-- The above is equivalent to these three declarations --> <allow-navigation href="http://*/*" /> <allow-navigation href="https://*/*" /> <allow-navigation href="data:*" />
Hay errores en su metaetiqueta.
Tuya:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src ''self'' ''unsafe-inline''; script-src: ''self'' ''unsafe-inline'' ''unsafe-eval''>
Corregido:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src ''self'' ''unsafe-inline''; script-src ''self'' ''unsafe-inline'' ''unsafe-eval''"/>
Tenga en cuenta los dos puntos después de "script-src" y la comilla doble final de la metaetiqueta.
Para mí fue suficiente reinstalar el complemento de la lista blanca :
cordova plugin remove cordova-plugin-whitelist
y entonces
cordova plugin add cordova-plugin-whitelist
Parece que la actualización de versiones anteriores de Cordova no tuvo éxito.
Para mí, el problema era que estaba usando versiones obsoletas de las plataformas cordova android e ios . Entonces, la actualización a [email protected] y [email protected] lo resolvió.
Puede actualizar a estas versiones específicas:
cordova platforms rm android
cordova platforms add [email protected]
cordova platforms rm ios
cordova platforms add [email protected]