이미지 소스 링크의 인증 헤더

JWT를 사용하는 API가 있습니다. 저는 이 API를 Vue 앱에서 사용하고 있습니다. 앱에서 이미지를 표시하기 위해 다음과 같은 코드를 사용하려고 합니다.

<img src=my/api/link />

하지만 API는 헤더에 JWT를 포함한 Authorization을 요구합니다.

이렇게 브라우저 요청에 헤더를 추가할 수 있을까요?

이를 해결할 수 있는 방법이 있을까요 (JS를 사용하여) 아니면 API 자체를 변경해야 할까요?

답변 1

img 태그에서 직접 href로 사용되는 이미지에는 인증을 수행할 수 없습니다. 만약 이미지에 이러한 유형의 인증을 원한다면, ajax를 사용하여 이미지를 가져온 후 html에 삽입하는 것이 좋습니다.

답변 2

이미지에 대한 부연 설명을 위해 alt 텍스트와 함께 태그의 src 속성을 사용할 수 있습니다. 그러나 이미지 URL에 권한 부여 헤더를 포함시킬 때는 주의가 필요합니다. 대부분의 검색 엔진은 웹 페이지의 콘텐츠를 효과적으로 색인화하지만, 이미지 파일 자체는 크롤링하지 않습니다. 따라서 이미지 URL에 있는 권한 부여 헤더는 검색 엔진에게 아무런 의미가 없을 수 있습니다.
일반적으로 이미지 권한 부여 헤더는 서버 측에서 제어됩니다. 이미지를 사용하려는 사용자의 인증 상태와 서버의 권한 정책에 따라 결정됩니다. 이러한 권한 부여 헤더는 이미지를 보호하고 무단 액세스로부터 보안을 제공하기 위해 사용됩니다. 하지만 이러한 보안 메커니즘은 이미지를 검색 엔진으로부터 가려 사용자 경험에 영향을 미칠 수 있습니다.
검색 엔진은 이미지 콘텐츠를 이해하고 색인화할 때 alt 텍스트에 큰 의미를 두고 있습니다. alt 텍스트는 이미지가 로드되지 못했을 때 사용자에게 보여지는 대체 텍스트로, 이미지와 관련된 키워드와 설명을 포함해야 합니다. 이미지의 콘텐츠와 웹 페이지의 주제와 관련된 키워드를 사용함으로써 검색 엔진이 웹 페이지의 주제를 이해하는 데 도움을 줍니다. 따라서 alt 텍스트를 신중하게 작성하여 검색 엔진 최적화(SEO)를 위한 기회를 활용해야 합니다.
하지만 이미지 URL에 권한 부여 헤더를 포함하면 이미지가 성공적으로 로드되지 못할 가능성이 있습니다. 이는 검색 엔진이 이미지의 콘텐츠를 이해하기 힘들게 할 수 있으며, 웹 페이지의 주제와 관련된 키워드의 의미를 역시 파악하기 어렵게 할 수 있습니다. 따라서 이미지 URL에 권한 부여 헤더를 포함하기보다는, 이미지 보안에 대한 다른 접근 방식을 고려하는 것이 좋습니다.
일반적으로 이미지에 대한 SEO를 개선하는 가장 좋은 방법은 alt 텍스트를 적절하게 사용하는 것입니다. 이미지 URL에 권한 부여 헤더를 포함하지 않으면서도 보안을 유지하려면 서버 측에서 액세스 제어를 설정하거나 이미지를 보호하는 다른 방법을 고려해야 합니다. 검색 엔진 최적화를 위해 웹 페이지의 콘텐츠와 이미지가 상호작용할 수 있도록 하기 위해서는 서버 측에서 적절한 권한 제어 및 이미지 콘텐츠 최적화를 함께 고려해야 합니다.
결론적으로 이미지 URL에 권한 부여 헤더를 포함하는 것은 SEO에 부정적인 영향을 줄 수 있습니다. 대신 alt 텍스트를 적절히 활용하고, 이미지와 관련된 키워드와 설명을 통해 검색 엔진이 웹 페이지의 주제를 이해할 수 있도록 하는 것이 중요합니다. 또한 보안을 유지하려면 다른 방법을 고려하여 서버 측에서 적절한 액세스 제어를 설정해야 합니다. 성능과 사용자 경험을 위해서도 이미지 URL에 권한 부여 헤더를 포함하는 것은 적절하지 않을 수 있으므로, 다양한 요소를 고려하여 합리적인 결정을 내리는 것이 좋습니다.