a링크 있는곳에 hover하면 왼쪽 하단에 주소 상태바같은게 나오는데
본문
a링크 있는곳에 hover하면 왼쪽 하단에 주소 상태바같은게 나오는데 이거 안나오게 할 수 없나요?
문제가 되는것 같은곳은 datahtml.push('<a href="'+ list_data.url +'" ' + tmp_class + '>'); 이런거 같은데
답변 2
브라우저의 하단 링크 표시 기능은 브라우저 고유의 기능으로 설계되었으며,
기본적으로 이를 변경하거나 제거할 수는 없습니다.
PHP 서버를 예시로 하자면,
로직에 a 태그를 사용하는 대신, JavaScript를 활용하여
클릭 이벤트를 처리하는 방식으로 구현하여,
실제 링크를 브라우저가 직접 렌더링하지 않도록 하면 어떨까요.
예로, PHP 서버는 클릭 시 처리될 데이터를 특정 "엔드포인트"로 POST 요청하여 처리하고,
JavaScript로 서버 응답에 따라 페이지를 동적으로 이동시키는 방식을 구현하면~
다시 말해, JavaScript 기반의 대체 방식을 통해
주소 표시를 우회하거나 숨기는 작업은 가능하지만,
이는 브라우저의 기본 동작을 억제하는 형태일 뿐입니다.
※ 그누보드의 구조를 바탕으로
js/common.js 파일에 JavaScript 코드를 추가하고,
lib/uri.lib.php에 클릭 이벤트를 처리하는 PHP 엔드포인트를 작성하여 시도해 볼까요.
＊JavaScript (js/common.js)
document.addEventListener('DOMContentLoaded', () => {
const customLinks = document.querySelectorAll('.custom-link');
customLinks.forEach(link => {
link.addEventListener('click', (event) => {
event.preventDefault();
const target = link.getAttribute('data-target');
fetch('/ajax/redirect.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ target })
})
.then(response => response.json())
.then(data => {
if (data.success) {
window.location.href = data.redirect;
} else {
alert('Error occurred');
}
});
});
});
});
＊PHP 엔드포인트 (lib/uri.lib.php)
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$input = json_decode(file_get_contents('php://input'), true);
$target = $input['target'] ?? '';
if (!empty($target) && is_valid_url($target)) {
echo json_encode(['success' => true, 'redirect' => $target]);
} else {
echo json_encode(['success' => false]);
}
}
function is_valid_url($url) {
return filter_var($url, FILTER_VALIDATE_URL);
}
?>
＊HTML 예제 (bbs/list.php)
<a href="#" class="custom-link" data-target="https://gnuchoboda.kr">Gnuchoboda</a>
이 방식은 브라우저의 하단 표시를 숨기기는 하지만,
네트워크 요청(개발자 도구의 네트워크 탭)에서는 링크가 여전히 노출됩니다.
따라서 이 대안이 완전한 보안 대책은 아님을 염두에 두시기 바랍니다.
브라우저의 기본 기능으로 나오는 것이 정상이고 권장됩니다.
굳이 나오지 않게 하고 싶다면 javascript onlick 처리 방법이 있습니다.
datahtml.push('<a onclick="window.location=\''+ list_data.url +'\';" style="cursor:pointer;" ' + tmp_class + '>');
