Skip to main content

Sec Fetch Mode - Qué Es Y Cómo Usarlo

  • Hipólito Cabanillas-Sarabia
  • Artículos

Sec Fetch Mode (modo de Arranque seguro) es un atributo del encabezado Http fetch Metadata que le permite especificar en qu modo debe ejecutarse la solicitud cuando se recibe un recurso. Se utiliza para garantizar la seguridad y la protecci n de los datos en las p ginas web.

Sec Fetch Mode:

no-cors: La solicitud se ejecuta en modo no Corso, lo que significa deshabilitar la directiva Same-Origin y permitir que las solicitudes accedan a recursos externos sin enviar informaci n al servidor.

cors: La solicitud se ejecuta en modo cors, lo que significa activar la directiva Same-Origin y verificar que la solicitud solo se puede ejecutar si el origen de la solicitud y el recurso solicitado est n en el mismo dominio.

C mo usar Sec Fetch Mode:

  1. Agregue El encabezado fetch Metadata con el atributo sec Fetch Mode.
  2. Especifique un valor de atributo que coincida con el modo deseado (por ejemplo, "no-cors" o "cors").

Sec Fetch Mode le permite controlar la seguridad de las solicitudes de recursos externos en las p ginas web, lo que ayuda a proteger los datos y prevenir posibles vulnerabilidades.

Nota: El uso correcto De sec Fetch Mode requiere el cumplimiento de las pol ticas de seguridad de Same-Origin y la configuraci n del lado del servidor. El uso incorrecto puede llevar a problemas de seguridad y actividades no deseadas.

  1. Sec Fetch Mode no-cors
  2. Sec Fetch Mode same-origin
  3. Sec Fetch Mode cors
  4. Sec Fetch Mode navigate
  5. Sec Fetch Mode websocket
  6. C mo elegir el Modo sec Fetch Adecuado
  7. Pregunta-respuesta
  8. Qu es Sec Fetch Mode?
  9. C mo usar Sec Fetch Mode?

Sec Fetch Mode no-cors

Sec Fetch Mode no-cors es uno de los valores posibles para el atributo mode cuando se usa la funci n fetch() en JavaScript.

Cuando el modo se establece en no-cors, significa que la solicitud se ejecutar , pero la respuesta del servidor ser de solo lectura, sin acceso a los datos de respuesta, excepto a las propiedades b sicas como el c digo de estado y los encabezados.

Este modo es til cuando necesita enviar una solicitud a otro dominio, pero no necesita datos de respuesta completos. Por ejemplo, si env a una solicitud para realizar un seguimiento de los datos o para verificar la disponibilidad del servidor.

Las limitaciones del modo no-cors incluyen:

  • Falta de acceso al contenido de la respuesta (excepto las propiedades subyacentes)
  • No se pueden establecer o Leer los encabezados de solicitud y respuesta
  • Incapacidad para instalar o Leer cookies, excepto las cookies que son "same-site"

Cuando se utiliza el modo no-cors, aqu hay un c digo de ejemplo:

fetch('https://api.example.com/data', {

mode: 'no-cors'

})

.then(response => {

console.log(response.status);

console.log(response.headers.get('content-type'));

})

.catch(error => {

console.log(error);

});

En este ejemplo, se env a una solicitud GET a 'https://api.example.com/data' con el modo no-cors. La consola mostrar el c digo de estado de la respuesta y el valor del encabezado 'content-type' de la respuesta del servidor (si la response no es null).

Sec Fetch Mode no-cors puede ser una herramienta til en el desarrollo de aplicaciones web, pero es necesario tener cuidado con el uso de este modo para evitar posibles problemas de seguridad.

Sec Fetch Mode same-origin

Sec Fetch Mode es una configuraci n utilizada en Fetch API para controlar c mo el navegador maneja las solicitudes de recursos como im genes, scripts y otros datos.

Sec Fetch Mode same-origin le indica al navegador que solo debe realizar solicitudes a los recursos que residen en el mismo origen que el documento actual.

El uso De sec Fetch Mode same-origin proporciona un mayor nivel de seguridad, ya que limita el acceso a recursos ubicados en otros dominios o Subdominios que pueden contener c digo potencialmente malicioso.

Un ejemplo de uso de Sec Fetch Mode same-origin podr a ser el siguiente c digo:

fetch('/api/data', {

method: 'GET',

headers: {

'Content-Type': 'application/json'

},

mode: 'same-origin'

})

.then(response => response.json())

.then(data => {

// Procesamiento de los datos recibidos

});

en la misma fuente que el documento actual. Al usar Sec Fetch Mode same-origin, el navegador solo permitir la ejecuci n de la solicitud si est destinado a descargar recursos de la misma fuente.

Esto evita la falsificaci n de solicitudes y los ataques a los usuarios asociados con la descarga de datos maliciosos de Fuentes externas.

Es importante tener en cuenta que Sec Fetch Mode same-origin solo funciona cuando se cargan recursos desde una p gina web. Si intenta ejecutar una solicitud desde un archivo o extensi n, este modo puede ser ignorado.

Sec Fetch Mode cors

Sec Fetch Mode cors (Cross-origin resource sharing) es un modo de solicitud de un recurso en otro dominio de una p gina web en el que el navegador env a una consulta previa de OPTIONS para ver si las solicitudes del origen al que se env a la solicitud est n permitidas.

El modo cors se usa ampliamente cuando se usa AJAX para realizar solicitudes entre dominios. Gracias a cors, los navegadores pueden enviar solicitudes a recursos en otros dominios, al tiempo que restringen seriamente el acceso a los recursos permitidos.

Las solicitudes realizadas en el modo cors solo pueden ser procesadas por el servidor que las autoriz . Si el servidor no ha permitido la solicitud, el navegador no proporcionar acceso a la respuesta.

Las consultas en el modo cors se pueden realizar de dos maneras: simple y con el uso de una consulta previa. Las solicitudes simples se realizan cuando existen ciertas condiciones, como el uso de m todos GET, POST o HEAD, no se utilizan encabezados personalizados o solo se ha utilizado un encabezado Accept simple.

Si una solicitud no cumple con los requisitos de una solicitud simple, el navegador pre-solicitar autom ticamente OPTIONS para obtener el permiso del servidor para ejecutar la solicitud en modo cors.

Las OPCIONES de pre-consulta incluyen la siguiente informaci n:

  • M todo, tipo y URL del recurso solicitado
  • Encabezados enviados en la solicitud
  • Cookies e informaci n de autenticaci n

El servidor puede permitir o denegar el acceso al recurso solicitado y establecer una lista de m todos permitidos, encabezados y dominios desde los que se pueden realizar solicitudes. Estas configuraciones se controlan mediante los encabezados de respuesta Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers y otros.

El uso del modo cors le permite controlar la seguridad de las solicitudes entre diferentes dominios, aumenta la seguridad de los usuarios y protege los datos del sitio contra el acceso no autorizado.

Sec Fetch Mode navigate

Sec Fetch Mode navigate es el valor del atributo sec-fetch-mode para el encabezado Sec-Fetch-Mode en los encabezados de solicitud HTTP. Especifica c mo el navegador debe procesar la solicitud y la respuesta recibida cuando navega a una nueva p gina.

Cuando se usa Sec Fetch Mode navigate, el navegador asume que el recurso cargado reemplazar completamente la p gina actual y realiza las acciones apropiadas para la navegaci n. En otras palabras, el navegador espera una acci n de navegaci n completa en respuesta a esa solicitud, como hacer clic en un enlace o enviar un formulario.

Cuando el navegador realiza una solicitud Con sec Fetch Mode navigate, espera que el servidor devuelva un documento HTML que reemplazar la p gina actual. El navegador verificar los encabezados de solicitud y respuesta para asegurarse de que cumplan con la pol tica de seguridad requerida.

Por ejemplo, si hay un encabezado Content-Security-Policy en los encabezados HTTP de la respuesta que indica que JavaScript no debe ejecutarse en la p gina, el navegador bloquea la ejecuci n de JavaScript del c digo recibido en la respuesta.

Adem s, si el encabezado Sec-Fetch-Site apunta a otro sitio, el navegador puede tomar medidas de seguridad adicionales para evitar la navegaci n no autorizada.

El uso De sec Fetch Mode navigate tiene sentido cuando se navega de una p gina a otra a trav s de un enlace o enviando un formulario. En tales casos, el navegador espera que el recurso cargado reemplace completamente la p gina actual y realiza las acciones de navegaci n correspondientes a este comportamiento.

Sec Fetch Mode websocket

Sec Fetch Mode websocket es el valor del atributo sec-fetch-mode cuando se utiliza el protocolo WebSockets. Especifica c mo debe comportarse el navegador al ejecutar una solicitud de WebSockets.

Sec Fetch Mode websocket tiene los siguientes valores posibles:

  • no-cors: Si el navegador no puede ejecutar una solicitud de WebSockets usando CORS, entonces deber a no hacer nada y terminar con eso.
  • cors: el Navegador debe ejecutar una solicitud de WebSockets usando CORS. Enviar una solicitud preliminar de OPTIONS para verificar si se permite el acceso al recurso.
  • navigate: el Navegador debe ejecutar la solicitud WebSockets como parte de la navegaci n del usuario. Esto puede ser, por ejemplo, al abrir una nueva pesta a o hacer clic en un enlace.

Sec Fetch Mode websocket puede ser til para determinar las acciones del navegador al realizar una solicitud de WebSockets y permitir o bloquear el acceso a un recurso, dependiendo de la configuraci n de seguridad.

C mo elegir el Modo sec Fetch Adecuado

Sec Fetch Mode es un atributo de la pol tica de seguridad de Fetch que le permite controlar c mo el navegador cargar recursos de otra fuente.

Cuando un navegador realiza una solicitud a otro recurso, como una imagen o un script, puede usar uno de los cinco Modos sec Fetch Mode:

  1. no-cors : este modo le permite cargar un recurso, pero no le permite acceder a la respuesta o sus encabezados. Este modo es til para procesar solicitudes a otras Fuentes sin tener que obtener datos en la respuesta.
  2. "cors": este es el modo m s com n y le permite cargar un recurso y acceder a la respuesta y sus encabezados. Se usa para consultar otras Fuentes cuando desea Leer datos de una respuesta o usar headers para realizar operaciones adicionales.
  3. "same-origin": este modo solo le permite cargar un recurso desde el mismo origen que la p gina actual. Esto significa que no se permitir la descarga de un recurso desde otra fuente.
  4. "navegar": este es un modo dise ado espec ficamente para la navegaci n, es decir, para cargar nuevas p ginas. En este modo, el navegador utilizar la pol tica de seguridad Fetch completa e incluir todas las restricciones aplicadas a la carga de la p gina.
  5. websocket : este modo se utiliza para cargar un recurso a trav s del protocolo WebSocket. Permite establecer una conexi n permanente entre el navegador y el servidor para el intercambio de datos en tiempo real.

Elegir el Modo sec Fetch adecuado depende de su situaci n espec fica y los requisitos del proyecto. Si necesita cargar un recurso est tico desde otro dominio, es probable que elija el modo "cors". Si desea restringir el acceso a un recurso solo desde la misma fuente, seleccionar el modo "same-origin".

Adem s de elegir el modo de B squeda Sec adecuado, tambi n es importante configurar correctamente los encabezados de respuesta del servidor para indicarle al navegador qu recursos puede descargar y c mo manejarlos. Cross-Origin Resource Sharing (CORS) es una pol tica de seguridad importante que permite al navegador permitir o denegar la descarga de recursos de otros dominios.

Por lo tanto, al elegir Sec Fetch Mode, debe tener en cuenta los requisitos de su proyecto y regular el acceso a los recursos de acuerdo con la pol tica de seguridad de su aplicaci n web.

Pregunta-respuesta

Qu es Sec Fetch Mode?

Sec Fetch Mode (Secure Fetch Mode) es un atributo en el Encabezado fetch Metadata que especifica c mo el navegador debe manejar la solicitud y la respuesta entre el sitio original y el sitio de destino, incluido el uso de CORS (Cross-Origin Resource Sharing).

C mo usar Sec Fetch Mode?

Para usar sec Fetch Mode, debe agregar El encabezado fetch Metadata a la solicitud. En este encabezado, debe especificar el modo de operaci n requerido, por ejemplo, " no-cors "(en caso de que no se requiera acceso a la respuesta) o" cors " (en caso de que se requiera acceso a la respuesta)