개발
Laravel 개발 일지

라라벨 Permissions-Policy 헤더 추가 하는 방법

163 views as of November 8, 2024.

크롬 브라우저 콘솔창 에러

크롬 브라우저 일부 사이트에서 아래와 같은 브라우저 에러가 콘솔에 뜨는 것을 볼 수 있다.

Attestation check for Topics on https://coupa.ng/ failed.
Attestation check for Topics on https://partners.coupangcdn.com/ failed.Copy


위 경우에는 사이트에 붙인 쿠팡 파트너스의 문제이지만 구글링을 해보니까 단순히 쿠팡만의 문제가 아니라 크롬 브라우저의 정책으로 판단된다.

Permission-Policy 관련 자료

Chrome Browser Error: Attestation check for Topics on https://pagead2.googlesyndication.com/ failed
Chrome Browser Error: Attestation check for Topics on https://pagead2.googlesyndication.com/ failed
In the latest Chrome version (Version 118.0.5993.71 (Official Build) (64-bit)), for a software product I'm selling, I'm getting: Attestation check for Topics on https://pagead2.googlesyndication.com/
https://stackoverflow.com/questions/77303375/chrome-browser-error-attestation-check-for-topics-on-https-pagead2-googlesynd

Permissions-Policy - HTTP | MDN
Permissions-Policy - HTTP | MDN
The HTTP Permissions-Policy header provides a mechanism to allow and deny the use of browser features in a document or within any <iframe> elements in the document.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy

Permissions-Policy 는 브라우저에 대한 다양한 기능 권한을 설정할 수 있다.

세부 설정으로는, camera, geolocation, microphone, fullscreen, autoplay, browsing-topics 등 여러가지를 컨트롤 할 수 있다.

각각의 설정을 헤더에 담아 보내는것으로 페이지를 랜더링하는 브라우저나 기기에서 관련 기능을 참조하는 지표가 될 수 있으며 아래와 같이 사용된다고 한다.

Permissions-Policy: camera=(), microphone=(), geolocation=("self"), fullscreen=("https://example.com")Copy

Browsing-topic 옵션

여기서 논해봐야할거는 위의 콘솔에러에도 보였던 browsing-topics 이다.

이 설정은 브라우저가 사용자의 관심사를 추론하는 토픽 API의 사용을 제어하는것이다.
위 에러의 경우에는 해당 쿠팡 링크가 사용자의 관심사 카테고리를 기반한 맞춤형 광고로 이용할때 관련된 기능 권한을 얻지 못했다는 에러 메세지이다.

뭐 해당 쿠팡 링크는 단순히 검색위젯 기능만하므로 개인화 관련된 TopicAPI는 꺼놔도 될거같다.

적용하는 방법은 직접 애플리케이션 요청헤더에 넣는방법이 있고 웹서버 설정에서 헤더를 작성하는법도 있다.

여기서는 라라벨 프로젝트에서 어떻게 Permissions-Policy 를 헤더에 넣는지 기술하고자 한다.

라라벨 미들웨어를 이용한 헤더 추가

우선 이 과정을 처리하기위하 라라벨 모든 요청시에 호출되는 미들웨어를 이용하고자 한다.

미들웨어 하나를 아래 명령어를 통해 생성해준다. (물론 직접 \App\Http\Middleware 경로에 생성해줘도 무방하다)

 php artisan make:middleware PermissionPolicyCopy

그리고 해당 미들웨어 파일을 아래와 같이 작성해준다.

<?php

namespace App\Http\Middleware;

use Closure;

class PermissionPolicy
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $response = $next($request);

        // Add Permissions-Policy header
        $response->headers->set('Permissions-Policy', 'browsing-topics=()');
        // 현재 사이트에 대해서 TopicAPI를 키려한다면 아래 코드로 적용
        //$response->headers->set('Permissions-Policy', 'browsing-topics=("self")');

        return $response;
    }
}
Copy

그리고 이 미들웨어가 작동될 수 있게 App\Http\Kernel.php 파일을 열어 protected $middlewareGroups 의 'web' 배열 최하단에 아래와 같이 추가해준다.

protected $middlewareGroups = [
    'web' => [
        \App\Http\Middleware\EncryptCookies::class,
        \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
        \Illuminate\Session\Middleware\StartSession::class,
        // \Illuminate\Session\Middleware\AuthenticateSession::class,
        \Illuminate\View\Middleware\ShareErrorsFromSession::class,
        \App\Http\Middleware\VerifyCsrfToken::class,
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
        \App\Http\Middleware\PermissionPolicy::class, // 방금 만든 PermissionPolicy 미들웨어 추가
    ],

    'api' => [
        'throttle:60,1',
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
    ],
];Copy

그리고 페이지를 새로고침하면 해당 에러가 사라진것을 확인할 수 있다.

#개발 #라라벨 #Laravel #Permissions-Policy #Middleware #미들웨어 #헤더
0 개의 댓글
×