Acceso-Control-Permitir-Origen ¿Dominios de origen múltiple?

¿Hay alguna manera de permitir múltiples dominios cruzados usando el Access-Control-Allow-Originencabezado?

Soy consciente de esto *, pero está demasiado abierto. Realmente quiero permitir solo un par de dominios.

Como ejemplo, algo como esto:

Access-Control-Allow-Origin: http://domain1.example, http://domain2.example

He probado el código anterior pero no parece funcionar en Firefox.

¿Es posible especificar múltiples dominios o estoy atascado con solo uno?

Parece que la forma recomendada de hacerlo es hacer que su servidor lea el encabezado Origin del cliente, compare eso con la lista de dominios que le gustaría permitir, y si coincide, repita el valor del Originencabezado de nuevo al cliente como el Access-Control-Allow-Originencabezado en la respuesta.

Con .htaccessusted puede hacerlo así:

# ----------------------------------------------------------------------
# Allow loading of external fonts
# ----------------------------------------------------------------------
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    <IfModule mod_headers.c>
        SetEnvIf Origin "http(s)?://(www\.)?(google.com|staging.google.com|development.google.com|otherdomain.example|dev02.otherdomain.example)$" AccessControlAllowOrigin=$0
        Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
        Header merge Vary Origin
    </IfModule>
</FilesMatch>

Otra solución que estoy usando en PHP:

$http_origin = $_SERVER['HTTP_ORIGIN'];

if ($http_origin == "http://www.domain1.com" || $http_origin == "http://www.domain2.com" || $http_origin == "http://www.domain3.com")
{  
    header("Access-Control-Allow-Origin: $http_origin");
}

Esto funcionó para mí:

SetEnvIf Origin "^http(s)?://(.+\.)?(domain\.example|domain2\.example)$" origin_is=$0 
Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is

Cuando se coloca .htaccess, funcionará seguro.

Tuve el mismo problema con woff-fonts, varios subdominios tenían que tener acceso. Para permitir subdominios, agregué algo como esto a mi httpd.conf:

SetEnvIf Origin "^(.*\.example\.com)$" ORIGIN_SUB_DOMAIN=$1
<FilesMatch "\.woff$">
    Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN
</FilesMatch>

Para múltiples dominios, simplemente puede cambiar la expresión regular en SetEnvIf.

Aquí le mostramos cómo hacer eco del encabezado Origin si coincide con su dominio con Nginx, esto es útil si desea servir una fuente en varios subdominios:

location /fonts {
    # this will echo back the origin header
    if ($http_origin ~ "example.org$") {
        add_header "Access-Control-Allow-Origin" $http_origin;
    }
}

Esto es lo que hice para una aplicación PHP que AJAX solicita

$request_headers        = apache_request_headers();
$http_origin            = $request_headers['Origin'];
$allowed_http_origins   = array(
                            "http://myDumbDomain.example"   ,
                            "http://anotherDumbDomain.example"  ,
                            "http://localhost"  ,
                          );
if (in_array($http_origin, $allowed_http_origins)){  
    @header("Access-Control-Allow-Origin: " . $http_origin);
}

Si mi servidor permite el origen de la solicitud, devuélvala $http_origincomo valor del Access-Control-Allow-Originencabezado en lugar de devolver un *comodín.

Hay una desventaja que debe tener en cuenta: tan pronto como externalice los archivos a un CDN (o cualquier otro servidor que no permita secuencias de comandos) o si sus archivos se almacenan en caché en un proxy, alterando la respuesta basada en 'Origin' el encabezado de solicitud no funcionará.

Para dominios múltiples, en su .htaccess:

<IfModule mod_headers.c>
    SetEnvIf Origin "http(s)?://(www\.)?(domain1.example|domain2.example)$" AccessControlAllowOrigin=$0$1
    Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header set Access-Control-Allow-Credentials true
</IfModule>

Para usuarios de Nginx permitir CORS para múltiples dominios. Me gusta el ejemplo de @ marshall, aunque sus respuestas solo coinciden con un dominio. Para hacer coincidir una lista de dominio y subdominio, esta expresión regular facilita el trabajo con fuentes:

location ~* \.(?:ttf|ttc|otf|eot|woff|woff2)$ {
   if ( $http_origin ~* (https?://(.+\.)?(domain1|domain2|domain3)\.(?:me|co|com)$) ) {
      add_header "Access-Control-Allow-Origin" "$http_origin";
   }
}

Esto solo hará eco de los encabezados "Access-Control-Allow-Origin" que coinciden con la lista de dominios dada.

Para IIS 7.5+ con el módulo URL Rewrite 2.0 instalado, vea esta respuesta SO

Aquí hay una solución para la aplicación web Java, basada en la respuesta de yesthatguy.

Estoy usando Jersey REST 1.x

Configure web.xml para conocer Jersey REST y CORSResponseFilter

 <!-- Jersey REST config -->
  <servlet>    
    <servlet-name>JAX-RS Servlet</servlet-name>
    <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
    <init-param> 
        <param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>com.sun.jersey.spi.container.ContainerResponseFilters</param-name>
      <param-value>com.your.package.CORSResponseFilter</param-value>
    </init-param>   
    <init-param>
        <param-name>com.sun.jersey.config.property.packages</param-name>
        <param-value>com.your.package</param-value>
    </init-param>        
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>JAX-RS Servlet</servlet-name>
    <url-pattern>/ws/*</url-pattern>
  </servlet-mapping>

Aquí está el código para CORSResponseFilter

import com.sun.jersey.spi.container.ContainerRequest;
import com.sun.jersey.spi.container.ContainerResponse;
import com.sun.jersey.spi.container.ContainerResponseFilter;


public class CORSResponseFilter implements ContainerResponseFilter{

@Override
public ContainerResponse filter(ContainerRequest request,
        ContainerResponse response) {

    String[] allowDomain = {"http://localhost:9000","https://my.domain.example"};
    Set<String> allowedOrigins = new HashSet<String>(Arrays.asList (allowDomain));                  

    String originHeader = request.getHeaderValue("Origin");

    if(allowedOrigins.contains(originHeader)) {
        response.getHttpHeaders().add("Access-Control-Allow-Origin", originHeader);

        response.getHttpHeaders().add("Access-Control-Allow-Headers",
                "origin, content-type, accept, authorization");
        response.getHttpHeaders().add("Access-Control-Allow-Credentials", "true");
        response.getHttpHeaders().add("Access-Control-Allow-Methods",
                "GET, POST, PUT, DELETE, OPTIONS, HEAD");
    }

    return response;
}

}

Como se mencionó anteriormente, Access-Control-Allow-Origindebe ser único y Varydebe establecerse Originsi está detrás de una CDN (Content Delivery Network).

Parte relevante de mi configuración de Nginx:

if ($http_origin ~* (https?://.*\.mydomain.example(:[0-9]+)?)) {
  set $cors "true";
}
if ($cors = "true") {
  add_header 'Access-Control-Allow-Origin' "$http_origin";
  add_header 'X-Frame-Options' "ALLOW FROM $http_origin";
  add_header 'Access-Control-Allow-Credentials' 'true';
  add_header 'Vary' 'Origin';
}

Tal vez estoy equivocado, pero hasta donde puedo ver Access-Control-Allow-Origintiene un "origin-list"parámetro como.

Por definición, un origin-listes:

origin            = "origin" ":" 1*WSP [ "null" / origin-list ]
origin-list       = serialized-origin *( 1*WSP serialized-origin )
serialized-origin = scheme "://" host [ ":" port ]
                  ; <scheme>, <host>, <port> productions from RFC3986

Y a partir de esto, sostengo que se admiten diferentes orígenes y deben estar separados por espacios .

Para las aplicaciones ExpressJS puede usar:

app.use((req, res, next) => {
    const corsWhitelist = [
        'https://domain1.example',
        'https://domain2.example',
        'https://domain3.example'
    ];
    if (corsWhitelist.indexOf(req.headers.origin) !== -1) {
        res.header('Access-Control-Allow-Origin', req.headers.origin);
        res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    }

    next();
});

Me costó configurar esto para un dominio que ejecuta HTTPS, así que pensé que compartiría la solución. Usé la siguiente directiva en mi archivo httpd.conf :

    <FilesMatch "\.(ttf|otf|eot|woff)$">
            SetEnvIf Origin "^http(s)?://(.+\.)?example\.com$" AccessControlAllowOrigin=$0
            Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    </FilesMatch>

Cambia example.coma tu nombre de dominio. Agregue esto dentro <VirtualHost x.x.x.x:xx>de su archivo httpd.conf . Tenga en cuenta que si VirtualHosttiene un sufijo de puerto (por ejemplo :80), esta directiva no se aplicará a HTTPS, por lo que también deberá ir a / etc / apache2 / sites-available / default-ssl y agregar la misma directiva en ese archivo, dentro de la <VirtualHost _default_:443>sección.

Una vez que se actualizan los archivos de configuración, deberá ejecutar los siguientes comandos en el terminal:

a2enmod headers
sudo service apache2 reload

Si tiene problemas con las fuentes, use:

<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
    <IfModule mod_headers>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Un enfoque más flexible es usar las expresiones de Apache 2.4. Puede hacer coincidir dominios, rutas y casi cualquier otra variable de solicitud. Aunque la respuesta enviada siempre es *, los únicos solicitantes que la reciben son los que cumplen los requisitos de todos modos. El uso del Originencabezado de solicitud (o cualquier otro) en la expresión hace que Apache lo combine automáticamente en el Varyencabezado de respuesta, por lo que esa respuesta no se reutilizará para un origen diferente.

<IfModule mod_headers.c>
    <If "%{HTTP:Host} =~ /\\bcdndomain\\.example$/i && %{HTTP:Origin} =~ /\\bmaindomain\\.example$/i">
        Header set Access-Control-Allow-Origin "*"
    </If>
</IfModule>

Código PHP:

$httpOrigin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : null;
if (in_array($httpOrigin, [
    'http://localhost:9000', // Co-worker dev-server
    'http://127.0.0.1:9001', // My dev-server
])) header("Access-Control-Allow-Origin: ${httpOrigin}");
header('Access-Control-Allow-Credentials: true');

HTTP_ORIGIN no es utilizado por todos los navegadores. ¿Qué tan seguro es HTTP_ORIGIN? Para mí viene vacío en FF.
Tengo los sitios a los que autorizo ​​el acceso a mi sitio y los envío a través de una ID de sitio, luego verifico mi base de datos para el registro con esa identificación y obtengo el valor de la columna SITE_URL (www.yoursite.com).

header('Access-Control-Allow-Origin: http://'.$row['SITE_URL']);

Incluso si envía un ID de sitio válido, la solicitud debe ser del dominio que figura en mi base de datos asociada con ese ID de sitio.

Aquí hay una opción ampliada para Apache que incluye algunas de las definiciones de fuente más recientes y planificadas:

<FilesMatch "\.(ttf|otf|eot|woff|woff2|sfnt|svg)$">
    <IfModule mod_headers.c>
        SetEnvIf Origin "^http(s)?://(.+\.)?(domainname1|domainname2|domainname3)\.(?:com|net|org)$" AccessControlAllowOrigin=$0$1$2
        Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
        Header set Access-Control-Allow-Credentials true
    </IfModule>
</FilesMatch>

Para facilitar el acceso a múltiples dominios para un servicio ASMX, creé esta función en el archivo global.asax:

protected void Application_BeginRequest(object sender, EventArgs e)
{
    string CORSServices = "/account.asmx|/account2.asmx";
    if (CORSServices.IndexOf(HttpContext.Current.Request.Url.AbsolutePath) > -1)
    {
        string allowedDomains = "http://xxx.yyy.example|http://aaa.bbb.example";

        if(allowedDomains.IndexOf(HttpContext.Current.Request.Headers["Origin"]) > -1)
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", HttpContext.Current.Request.Headers["Origin"]);

        if(HttpContext.Current.Request.HttpMethod == "OPTIONS")
            HttpContext.Current.Response.End();
    }
}

Esto permite el manejo CORS del OPTIONSverbo también.

Ejemplo de código PHP para subdominios coincidentes.

if( preg_match("/http:\/\/(.*?)\.yourdomain.example/", $_SERVER['HTTP_ORIGIN'], $matches )) {
        $theMatch = $matches[0];
        header('Access-Control-Allow-Origin: ' . $theMatch);
}

Para una copia / pegado bastante fácil para aplicaciones .NET, escribí esto para habilitar CORS desde un global.asax archivo. Este código sigue los consejos dados en la respuesta actualmente aceptada, reflejando cualquier origen devuelto en la solicitud en la respuesta. Esto efectivamente logra '*' sin usarlo.

La razón de esto es que habilita varias otras funciones de CORS , incluida la capacidad de enviar una AJAX XMLHttpRequest con el atributo 'withCredentials' establecido en 'verdadero'.

void Application_BeginRequest(object sender, EventArgs e)
{
    if (Request.HttpMethod == "OPTIONS")
    {
        Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
        Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
        Response.AddHeader("Access-Control-Max-Age", "1728000");
        Response.End();
    }
    else
    {
        Response.AddHeader("Access-Control-Allow-Credentials", "true");

        if (Request.Headers["Origin"] != null)
            Response.AddHeader("Access-Control-Allow-Origin" , Request.Headers["Origin"]);
        else
            Response.AddHeader("Access-Control-Allow-Origin" , "*");
    }
}

Y una respuesta más en Django. Para tener una vista única que permita CORS desde múltiples dominios, aquí está mi código:

def my_view(request):
    if 'HTTP_ORIGIN' in request.META.keys() and request.META['HTTP_ORIGIN'] in ['http://allowed-unsecure-domain.com', 'https://allowed-secure-domain.com', ...]:
        response = my_view_response() # Create your desired response data: JsonResponse, HttpResponse...
        # Then add CORS headers for access from delivery
        response["Access-Control-Allow-Origin"] = request.META['HTTP_ORIGIN']
        response["Access-Control-Allow-Methods"] = "GET" # "GET, POST, PUT, DELETE, OPTIONS, HEAD"
        response["Access-Control-Max-Age"] = "1000"  
        response["Access-Control-Allow-Headers"] = "*"  
        return response

AWS Lambda / API Gateway

Para obtener información sobre cómo configurar múltiples orígenes en AWS Lambda y API Gateway sin servidor, aunque una solución bastante grande para algo que uno sentiría debería ser bastante sencillo, consulte aquí:

https://stackoverflow.com/a/41708323/1624933

Actualmente no es posible configurar múltiples orígenes en API Gateway, consulte aquí: https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors-console.html ), pero la recomendación (en la respuesta anterior) es:

• inspeccionar el encabezado de origen enviado por el navegador
• compárelo con una lista blanca de orígenes
• si coincide, devuelva el origen entrante como el encabezado Access-Control-Allow-Origin; de lo contrario, devuelva un marcador de posición (origen predeterminado).

Obviamente, la solución simple es habilitar ALL (*) así:

exports.handler = async (event) => {
    const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Credentials" : true // Required for cookies, authorization headers with HTTPS
        },
        body: JSON.stringify([{

Pero podría ser mejor hacer esto en el lado de API Gateway (ver el segundo enlace más arriba).

La respuesta de soporte de Google sobre la publicación de anuncios a través de SSL y la gramática en el RFC en sí parece indicar que puede delimitar el espacio de las URL. No estoy seguro de qué tan bien soportado está en diferentes navegadores.

Si prueba tantos ejemplos de código como yo para que funcione con CORS, vale la pena mencionar que primero debe borrar su caché para probar si realmente funciona, similar a problemas como cuando las imágenes antiguas todavía están presentes, incluso si es eliminado en el servidor (porque todavía está guardado en su caché).

Por ejemplo CTRL + SHIFT + DEL en Google Chrome para eliminar su caché.

Esto me ayudó a usar este código después de probar muchas .htaccesssoluciones puras y esta parecía ser la única que funcionaba (al menos para mí):

    Header add Access-Control-Allow-Origin "http://google.com"
    Header add Access-Control-Allow-Headers "authorization, origin, user-token, x-requested-with, content-type"
    Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

    <FilesMatch "\.(ttf|otf|eot|woff)$">
        <IfModule mod_headers.c>
            SetEnvIf Origin "http(s)?://(www\.)?(google.com|staging.google.com|development.google.com|otherdomain.com|dev02.otherdomain.net)$" AccessControlAllowOrigin=$0
            Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
        </IfModule>
    </FilesMatch>

También tenga en cuenta que está muy extendido que muchas soluciones dicen que tiene que escribir, Header set ...pero es así Header add .... Espero que esto ayude a alguien que tiene los mismos problemas durante algunas horas como yo.

La siguiente respuesta es específica de C #, pero el concepto debería ser aplicable a todas las plataformas diferentes.

Para permitir solicitudes de origen cruzado desde una API web, debe permitir las solicitudes de opción a su aplicación y agregar la anotación a continuación en el nivel del controlador.

[EnableCors (UrlString, Header, Method)] Ahora los orígenes se pueden pasar solo como una cadena. Entonces, si desea pasar más de una URL en la solicitud, páselo como un valor separado por comas.

UrlString = " https: //a.hello.com,https: //b.hello.com "

Solo se puede especificar un origen único para el encabezado Access-Control-Allow-Origin. Pero puede establecer el origen en su respuesta de acuerdo con la solicitud. Además, no olvide configurar el encabezado Vary. En PHP haría lo siguiente:

    /**
     * Enable CORS for the passed origins.
     * Adds the Access-Control-Allow-Origin header to the response with the origin that matched the one in the request.
     * @param array $origins
     * @return string|null returns the matched origin or null
     */
    function allowOrigins($origins)
    {
        $val = $_SERVER['HTTP_ORIGIN'] ?? null;
        if (in_array($val, $origins, true)) {
            header('Access-Control-Allow-Origin: '.$val);
            header('Vary: Origin');

            return $val;
        }

        return null;
    }

  if (allowOrigins(['http://localhost', 'https://localhost'])) {
      echo your response here, e.g. token
  }

También podemos configurar esto en el archivo Global.asax para la aplicación Asp.net.

protected void Application_BeginRequest(object sender, EventArgs e)
    {

    // enable CORS
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "https://www.youtube.com");

    }