SERVER_REQUEST_ORIGINEs una variable de entorno utilizada en aplicaciones Angular para administrar el origen de las solicitudes del servidor. En este artículo, explicaré en detalle qué significa esta variable de entorno, qué hace y cómo usarla en aplicaciones Angular. Primero, comprendamos los antecedentes y la importancia de esta variable de entorno.
1. Aplicaciones angulares y variables de entorno.
Angular es un marco de interfaz de usuario popular para crear aplicaciones modernas de una sola página (SPA). Un SPA es una aplicación web que carga dinámicamente contenido desde el servidor a través de solicitudes AJAX después de la carga, en lugar de recargar la página completa cada vez que el usuario navega a una nueva página. Para lograr esta carga dinámica, las aplicaciones Angular necesitan comunicarse con el servidor para obtener datos, recursos y realizar otras operaciones. En este proceso, hay un problema clave que debe resolverse, que es determinar el origen de la solicitud del servidor.
El origen de la solicitud del servidor se refiere a qué nombres de dominio o URL se consideran confiables para comunicarse con las aplicaciones Angular. Normalmente, los navegadores implementan la Política del mismo origen, lo que significa que una página sólo puede comunicarse con recursos del mismo origen (protocolo, nombre de dominio y puerto). Esta es una restricción por razones de seguridad para evitar ataques como la falsificación de solicitudes entre sitios (CSRF).
Sin embargo, en aplicaciones reales, puede ser necesario comunicarse con servidores de diferentes nombres de dominio, por ejemplo, para interactuar con servidores API o servicios de terceros. En este momento, se necesita un mecanismo para indicarle al navegador qué nombres de dominio son confiables. Para eso SERVER_REQUEST_ORIGINestán las variables de entorno.
2. El papel de SERVER_REQUEST_ORIGIN
SERVER_REQUEST_ORIGINLas variables de entorno se utilizan para definir las fuentes de solicitudes del servidor en las que confían las aplicaciones Angular. Sus funciones principales son las siguientes:
una garantia
Al especificar fuentes de solicitud de servidor confiables, puede mejorar la seguridad de las aplicaciones y reducir los posibles riesgos de seguridad. Solo se permitirán solicitudes de orígenes específicos, lo que reduce el riesgo de ataques entre sitios.
B. Comunicación entre dominios
En las aplicaciones web modernas, la comunicación entre dominios es un requisito común. Por ejemplo, es posible que su aplicación necesite obtener datos o recursos de servidores con diferentes nombres de dominio. A través de la configuración SERVER_REQUEST_ORIGIN, puede indicarle al navegador qué nombres de dominio son confiables y así permitir solicitudes entre dominios.
C. Configuración del entorno
SERVER_REQUEST_ORIGINEs una variable de entorno, lo que significa que se puede configurar de acuerdo con las necesidades de diferentes entornos. Puede configurar diferentes orígenes de solicitudes en entornos de desarrollo, pruebas y producción para garantizar la seguridad y flexibilidad de su aplicación en diferentes entornos.
3. Configurar SERVER_REQUEST_ORIGIN
Para configurar SERVER_REQUEST_ORIGINvariables de entorno, debe comprender cómo administrar entornos en aplicaciones Angular. Angular proporciona una environmentcarpeta llamada que contiene archivos de configuración para diferentes entornos. Normalmente, estos archivos incluyen environment.ts(entorno de desarrollo), environment.prod.ts(entorno de producción), etc.
Estos son SERVER_REQUEST_ORIGINlos pasos generales para la configuración:
Paso 1: abra el archivo de configuración del entorno
Primero, debe abrir el archivo de configuración del entorno que corresponde a su entorno de desarrollo actual. Por ejemplo, en un entorno de desarrollo, abra environment.tsel archivo.
Paso 2: definir SERVER_REQUEST_ORIGIN
En el archivo de configuración del entorno, puede agregar SERVER_REQUEST_ORIGINuna variable y darle un valor para el origen confiable de las solicitudes del servidor. Este valor suele ser el nombre de dominio o la URL del servidor. Por ejemplo:
export const environment = {
production: false,
SERVER_REQUEST_ORIGIN: 'https://api.example.com',
// 其他环境配置项...
};
Paso 3: usa SERVER_REQUEST_ORIGIN en tu aplicación
Una vez configurado SERVER_REQUEST_ORIGIN, puede usarlo en los servicios o componentes de su aplicación para crear solicitudes. Normalmente, establecería el campo en un encabezado de solicitud HTTP Originestableciendo su valor SERVER_REQUEST_ORIGINpara indicarle al servidor el origen de la solicitud. He aquí un ejemplo sencillo:
import {
Injectable } from '@angular/core';
import {
HttpClient, HttpHeaders } from '@angular/common/http';
import {
environment } from '../environments/environment';
@Injectable({
providedIn: 'root',
})
export class ApiService {
private readonly serverRequestOrigin: string = environment.SERVER_REQUEST_ORIGIN;
constructor(private http: HttpClient) {
}
getData() {
const headers = new HttpHeaders({
'Origin': this.serverRequestOrigin,
// 其他请求头...
});
return this.http.get(`${
this.serverRequestOrigin}/api/data`, {
headers });
}
}
4. Ejemplo de fuente de solicitud del servidor
Para comprender mejor SERVER_REQUEST_ORIGINel concepto, veamos algunos escenarios de ejemplo que involucran diferentes fuentes de solicitudes del servidor.
Ejemplo 1: fuente única
Supongamos que su aplicación Angular api.example.comse comunica con un servidor backend llamado . En este caso, puede SERVER_REQUEST_ORIGINconfigurar el nombre de dominio del servidor:
export const environment = {
production: false,
SERVER_REQUEST_ORIGIN: 'https://api.example.com',
// 其他环境配置项...
};
Esto significa que el navegador sólo permitirá https://api.example.comla comunicación con recursos bajo este nombre de dominio.
Ejemplo 2: múltiples fuentes
En algunos casos, es posible que su aplicación necesite comunicarse con varios servidores con diferentes nombres de dominio. Por ejemplo, su aplicación podría obtener datos de un servidor backend y también necesitar interactuar con un servidor de autenticación. En esto
En este caso, puede configurarlo SERVER_REQUEST_ORIGINcomo una cadena que contiene varios nombres de dominio o establecer diferentes valores en diferentes entornos.
export const environment = {
production: false,
SERVER_REQUEST_ORIGIN: 'https://api.example.com,https://auth.example.com',
// 其他环境配置项...
};
Después de esta configuración, el navegador permitirá la comunicación con recursos bajo los nombres de dominio https://api.example.comy .https://auth.example.com
Ejemplo 3: configuración dinámica
A veces es posible que desee configurarlo dinámicamente según el entorno de su aplicación SERVER_REQUEST_ORIGIN. Por ejemplo, puede utilizar un origen de servidor diferente en su entorno de desarrollo y otro origen en su entorno de producción. Esto se puede lograr estableciendo diferentes valores en diferentes archivos de configuración del entorno.
// 在 environment.ts 中
export const environment = {
production: false,
SERVER_REQUEST_ORIGIN: 'https://api.dev.example.com',
// 其他环境配置项...
};
// 在 environment.prod.ts 中
export const environment = {
production: true,
SERVER_REQUEST_ORIGIN: 'https://api.example.com',
// 其他环境配置项...
};
De esta manera, puede garantizar que se utilicen diferentes orígenes de solicitudes de servidor en diferentes entornos para satisfacer las necesidades de seguridad y configuración.
5. Política del mismo origen del navegador
Cuando utilice SERVER_REQUEST_ORIGINvariables de entorno, debe comprender la política del mismo origen del navegador. La Política del mismo origen es un mecanismo de seguridad del navegador que restringe la forma en que los documentos o scripts que una página carga desde una fuente interactúan con los recursos de otra fuente.
Específicamente, el navegador bloqueará las solicitudes de origen cruzado si el protocolo, el nombre de dominio y el número de puerto de los dos recursos no coinciden exactamente. Por eso SERVER_REQUEST_ORIGINes muy importante, porque le dice al navegador qué dominios son confiables.
6. Seguridad y mejores prácticas
Al configurar SERVER_REQUEST_ORIGIN, tenga en cuenta las siguientes prácticas recomendadas y de seguridad:
a. Confíe únicamente en los nombres de dominio necesarios
No SERVER_REQUEST_ORIGINlo establezca como comodín ni permita todos los nombres de dominio. Confíe únicamente en los nombres de dominio que su aplicación necesita para reducir los riesgos de seguridad.
B. Utilice HTTPS
Defina siempre el uso del protocolo HTTPS SERVER_REQUEST_ORIGINpara garantizar la seguridad de los datos durante la transmisión.
c. Evite almacenar información confidencial en el lado del cliente.
No almacene información confidencial en variables de entorno del cliente, ni siquiera en archivos de configuración del entorno. La información confidencial debe almacenarse de forma segura en el lado del servidor.
7. Resumen
En las aplicaciones Angular, SERVER_REQUEST_ORIGINlas variables de entorno son un elemento de configuración clave que se utiliza para administrar el origen de las solicitudes del servidor. Al configurar correctamente esta variable de entorno, puede mejorar la seguridad de su aplicación, permitir la comunicación entre dominios y configurar dinámicamente fuentes de solicitudes en función de diferentes necesidades ambientales. Comprenderlo y usarlo correctamente SERVER_REQUEST_ORIGINes un paso importante para crear aplicaciones Angular seguras, flexibles y escalables.