Que limitações se aplicam a respostas opacas?

As respostas opacas são definidas como parte da API Fetch e representam o resultado de uma solicitação feita a uma origem remota quando o CORS não está ativado.

Que limitações práticas e "pegadinhas" existem em torno de como as respostas opacas podem ser usadas, tanto do JavaScript quanto como recursos em uma página?

Acesso aos cabeçalhos / corpo das respostas opacas

A limitação mais direta em torno de respostas opacas é que você não pode obter informações significativas de volta da maioria das propriedades da Responseclasse, como headers, ou chamar os vários métodos que compõem a Bodyinterface, como json()ou text(). Isso está de acordo com a natureza de caixa preta de uma resposta opaca.

Usando respostas opacas como recursos em uma página

As respostas opacas podem ser usadas como um recurso em uma página da web sempre que o navegador permitir que um recurso de origem cruzada não CORS seja usado. Aqui está um subconjunto de elementos para os quais recursos de origem cruzada não CORS e, portanto, respostas opacas, são válidos, adaptado da documentação da Mozilla Developer Network :

• <script>
• <link rel="stylesheet">
• <img>,, <video>e<audio>
• <object> e <embed>
• <iframe>

Um caso de uso notável para o qual as respostas opacas não são válidas é para recursos de fonte .

Em geral, para determinar se você pode usar uma resposta opaca como um tipo específico de recurso em uma página, verifique a especificação relevante. Por exemplo, a especificação HTML explica que respostas de origem cruzada não CORS (ou seja, opacas) podem ser usadas para <script>elementos, embora com algumas limitações para evitar o vazamento de informações de erro.

Respostas opacas e API de armazenamento em cache

Uma "pegadinha" que o desenvolvedor pode encontrar com respostas opacas envolve o uso delas com a API Cache Storage . Duas informações básicas são relevantes:

• A statuspropriedade de uma resposta opaca é sempre definida como0 , independentemente de a solicitação original ter sido bem-sucedida ou não.
• Os métodos add()/ da API de armazenamento em cache addAll()rejeitarão se as respostas resultantes de qualquer uma das solicitações tiverem um código de status que não esteja no intervalo 2XX .

Destes dois pontos, segue-se que, se a solicitação executada como parte da chamada add()/ addAll()resultar em uma resposta opaca, ela não será adicionada ao cache.

Você pode contornar isso executando explicitamente um fetch()e, em seguida, chamando o put()método com a resposta opaca. Ao fazer isso, você está efetivamente optando pelo risco de que a resposta que está armazenando em cache possa ter sido um erro retornado por seu servidor.

const request = new Request('https://third-party-no-cors.com/', {mode: 'no-cors'});
// Assume `cache` is an open instance of the Cache class.
fetch(request).then(response => cache.put(request, response));

Respostas opacas e API navigator.storage

Para evitar o vazamento de informações entre domínios, há um preenchimento significativo adicionado ao tamanho de uma resposta opaca usada para calcular os limites de cota de armazenamento (ou seja, se uma QuotaExceededexceção é lançada) e relatado pela navigator.storageAPI .

Os detalhes desse preenchimento variam de navegador para navegador, mas para o Google Chrome, isso significa que o tamanho mínimo que qualquer resposta opaca em cache contribui para o uso geral do armazenamento é de aproximadamente 7 megabytes . Você deve ter isso em mente ao determinar quantas respostas opacas você deseja armazenar em cache, uma vez que você pode facilmente exceder as limitações de cota de armazenamento muito mais cedo do que você esperaria com base no tamanho real dos recursos opacos.