6

Recentemente vi no site do W3schools a possibilidade de executar códigos em JavaScript em links, colocando os scripts dentro do atributo href:

<a href="javascript:alert('Hello World!');">Execute JavaScript</a>

Por que isso existe, tem algum motivo para isso ainda funcionar?

9
  • 2
    Por que não deveria existir?
    – Maniero
    Commented 12/09/2020 às 1:46
  • 1
    O atributo href (Hypertext Reference ou referência para hipertexto) é usado com o objetivo de especificar uma URL. Não faz sentido colocar scripts (códigos que vão ser executados) no atributo href destinado a endereços (pelo menos na minha perspectiva já que quebraria o significado do atributo href). Commented 12/09/2020 às 1:55
  • 4
    Vou tentar de novo: Por que não deveria existir? Precisa dar um motivo, não fazer uma especulação. O problema da pergunta é justamente especular que isso não deveria existir. Sem saber a sua motivação da pergunta, ela não tem sentido. Daí veio uma resposta que é só uma crença. Tanto em perguntas quanto respostas, crenças não ajudam muito.
    – Maniero
    Commented 12/09/2020 às 10:35
  • 1
    Então eu vou responder, porque já tem resposta que nem responde e tem positivos. Vamos ver se você realmente quer saber o porquê ou partiu de uma premissa errada.
    – Maniero
    Commented 12/09/2020 às 14:30
  • 2
    Na verdade lendo o seu comentário em uma resposta mostra que não quer saber o porquê, sem explicar o motivo real porque quer saber isso não dá para responder, as duas respostas dadas não respondem o que quer saber ou o porquê disso existir, pior é uma delas nem passar perto e ter 2 positivos. Vou apenas resumir aqui o motivo de isso existir: não existe motivo para não existir. Se existe em outros lugares porque esse lugar deveria ser especial? E se você precisar fazer uso criativo disso?
    – Maniero
    Commented 12/09/2020 às 14:39

3 Respostas 3

11

Por que isso existe, tem algum motivo para isso ainda funcionar?

Vamos por partes...


URI Schemes

O valor javascript:código JavaScript é uma URI que usa o URI Scheme javascript. Basicamente, existem vários schemes diferentes (por exemplo, em uma URL como http://www.abc.com, o http é o scheme, mas há outros que não são necessariamente usados para URL's, como mailto, file, maps, entre outros - a lista é imensa).

No link do parágrafo anterior, o scheme javascript é listado como "Unofficial but common" (ou seja, não é oficialmente reconhecido pela IANA, cuja lista oficial é esta), mas ainda sim existe e é suportado pelos browsers (veja aqui o draft que define este scheme).

E onde eu posso colocar um URI Scheme em um documento HTML? Basicamente, em qualquer atributo desta lista cujo tipo seja URI. Veja que o a[href] é um desses cujo tipo é URI, mas também existem outros, como o img[src], body[background], form[action] e muitos outros (e além destes, também posso colocar código JavaScript nos atributos relacionados a eventos, como onclick, onload, etc - a diferença é que estes só podem ter código, enquanto os outros atributos já citados podem ter qualquer URI válida).

Isso não quer dizer que sempre vai funcionar com todos, claro. Por exemplo, os 2 exemplos abaixo não funcionam (testei no Chrome e Firefox):

<body background="javascript:alert('body background')">
<img src="javascript:alert('img src')">

Isso porque o browser tenta carregar as URL's como imagem e falha.

Mas existem outros casos em que um URI Scheme do tipo javascript funciona. Por exemplo, o exemplo abaixo mostra o alert ao carregar o iframe:

<body>
  <iframe src="javascript:alert('iframe')"></iframe>
</body>

E o exemplo abaixo mostra o alert quando o formulário é submetido (não funciona no snippet do site, mas testando diretamente no próprio browser, o alert foi mostrado):

<form action="javascript:alert('form action')">
    <input type="submit" name="vai">
</form>

Por que funciona?

Isso funciona porque, de forma resumida, acontece o seguinte:

  • o elemento possui um atributo cujo valor é uma URI qualquer (usando qualquer URI Scheme existente): um form pode ter uma URI no atributo action, um iframe pode ter no src, um a pode ter no href, etc...
  • esta URI é avaliada quando ocorrer um determinado evento, que varia conforme o elemento: em um form, é quando este é submetido, no iframe, é no momento em que ele é carregado, em um a, é quando este é clicado.
  • cada URI tem uma forma de ser avaliada e uma "consequência" (algo que ocorre em seguida):
    • se for uma URL como http://www.etc...: se estiver em um a faz com que o browser vá para a página, o form submete os dados para esta URL, o iframe carrega o conteúdo da URL.
    • se for mailto:[email protected], pode por exemplo abrir o cliente de email que está configurado no browser/SO (geralmente com o campo "To:" já preenchido com o endereço indicado).
    • se for javascript:código, o código é executado (o algoritmo para avaliar/executar um URI scheme javascript é descrito aqui).
    • etc... (cada URI Scheme tem sua própria maneira de ser avaliado e uma ação que o browser toma em seguida)
    • dependendo do elemento, pode ser que a URI não funcione (como é o caso do img src citado acima, por exemplo)

Mas faz sentido?

Se faz sentido usar ou não, aí é outra história (mas me parece que o foco da pergunta é mais sobre porque existe, e não necessariamente se faz sentido usar alert em um link - embora as outras respostas tenham focado somente neste segundo aspecto).

Talvez um a com javascript no href não faça muito sentido (como já explicado em outra resposta), mas com outros URI schemes faça. Por exemplo, mailto ou tel em um link, a meu ver, faz todo sentido - inclusive a MDN diz o seguinte sobre o atributo href:

Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers.


Links não são restritos à URL's HTTP - eles podem usar qualquer scheme suportado pelos browsers.

E entre os exemplos de schemes, ele cita tel e mailto, entre outros (outra página com um exemplo similar). Mas a mesma MDN também diz:

Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events.

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL.


Elementos a são frequentemente abusados na forma de botões falsos, setando o href para # ou javascript:void(0) para impedir que a página recarregue, e escutando os eventos de clique.

Esses valores de href causam comportamento inesperado ao copiar/arrastar os links, abrindo-os em uma nova aba/janela, adicionando aos favoritos ou quando o JavaScript está carregando, dá erro ou está desabilitado. Isso também dá uma semântica incorreta para tecnologias assistivas, como leitores de tela.

Em vez disso, use um <button>. De forma geral, você só deveria usar um link para navegar para uma URL real.

Ou seja, tecnicamente nada impede que se use javascript:código em um link, só não é recomendado.

Se os browsers proibissem tudo que não é recomendado, muita coisa deixaria de funcionar. Mas divago...


Um pouco de especulação...

Claro que o browser até poderia permitir apenas URL Schemes que "fazem sentido" e desabilitar o resto, mas pelo que vemos, não foi assim que decidiram fazer.

Mas vamos supor que os browsers decidam que não vai ser mais permitido código JavaScript no href. Isso poderia resolver a questão da semântica e demais problemas citados nas outras respostas, mas apenas parcialmente, pois ainda seria possível fazer isso:

document.querySelector('a').addEventListener('click', function(e) {
    e.preventDefault();
    alert('vc clicou no link, mas ele não vai pra lugar nenhum');
});
<a href="https://www.google.com">Link</a>

Ou seja, continua sendo possível fazer um link que não se comporta como um link: a URL do href é completamente ignorada e eu só mostro um alert (e esse funciona no snippet do site).

Claro que ainda sim alguém poderia argumentar que se proibir código no href, seria "um problema a menos para se preocupar". Mas pode ser que decidiram que não valia a pena criar uma exceção para fechar apenas uma porta, sendo que todas as outras continuariam abertas (e aqui estou especulando, não sei se alguém chegou de fato a discutir esse assunto ou se simplesmente implementaram o suporte aos URI Schemes em todos os atributos que podem receber uma URI válida e pronto).

Meu palpite é que "resolver" isso traria complicações demais que provavelmente não valem a pena, pois como eu impediria o caso acima? Dependendo do elemento e/ou do evento, eu deveria proibir a chamada à preventDefault? Ou não deveria nem deixar adicionar o evento de clique? Mas e os outros eventos, como hover, focus, e tantos outros? Mas aí o código daria erro ("estourando" na tela ou no console) ou falharia em silêncio? E isso é só para a[href], eu teria que rever também o comportamento para todos os atributos já citados, que aceitam um URI Scheme javascript. Quais combinações de elemento/evento "fazem sentido" e quais deveriam ser "proibidas"?

Então me parece que é "melhor" deixar que se aceite JavaScript no href, e quem cria as páginas que se preocupe em não (ab)usar.


Enfim, resumindo é isso: existe porque alguém criou, e ainda funciona porque não parece haver uma justificativa "boa o bastante" para deixar de funcionar.

4
  • Em links faz um pouco de sentido se usado com windows.open, mas, hoje, é mais raro seu uso, antigamente talvez fosse mais usado pra abrir chats ou algo assim (mas sou muito novo pra saber)
    – Costamilam
    Commented 18/09/2020 às 12:53
  • @Costamilam Isso também é discutível. Se o link deve abrir em outra janela, por que não usar o atributo target? Tudo bem que ele pode acabar abrindo outra aba e não tem como controlar, e window.open força a abertura de outra janela, mas aí cai no que eu citei na resposta: se não é para se comportar como um link, talvez devesse ser um botão ou outra coisa. Mas os browsers não impedem porque eles costumam ser bem permissivos com tudo (HTML mal formado que o diga), então cabe a nós evitar abusar dessas coisas :-)
    – hkotsubo
    Commented 18/09/2020 às 13:13
  • Sim, por isso disse "um pouco". Se os navegadores permitem até código XHTML, HTML4 e pequenos blocos incompletos, fora as APIs nativas consideradas obsoletas e que ainda funcionam, seria até estranho não permitir isso
    – Costamilam
    Commented 18/09/2020 às 14:10
  • 1
    @hkotsubo, boa respota! eu entendi o seu ponto de vista e me deu uma nova perspectiva, talvez se cada coisa que não fizesse sentido deixasse de funcionar, os códigos e programas que nós criamos, talvez não funcionasse como esperado, melhor deixar às coisas como está para não gerar problemas ou resultados inconvenientes. Commented 19/09/2020 às 14:33
3

No seu caso não faz sentido, pois não é semântico, e vai causar um problema de acessibilidade e de SEO. Links são para navegação, dentro ou fora da página, e não para alertas.

Segunda a Mozilla:

href:
A URL para a qual o hiperlink aponta. Links não se restrigem a URLs baseadas no protocolo HTTP — eles podem utilizar qualquer tipo de URL suportado pelos browsers:

  • Seções de página com fragmentos URL

  • Pedaços de arquivos de mídia com fragmentos da própria mídia

  • Números de telefone com tel: URLs

  • Email addresses with(Endereço de email com) mailto: URLs

  • Alguns navegadores talvez não aguentem certos arranjos em URL, para isso os websites fazem uso do registerProtocolHandler()

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/a#attr-href

E segundo a própria W3C sobre o href

This attribute specifies the location of a Web resource, thus defining a link between the current element (the source anchor) and the destination anchor defined by this attribute.


Problemas de UX

Mas o ponto principal mesmo é a acessibilidade e não se você "pode" ou não usar JS no link. Você tem que pensar na UX, você já clicou em um Link e viu um Alert aparecer? Seria algo muito inusitado concorda, pois é um comportamento que não se espera de um link.

Outra coisa é em relação aos Screen Readers (leitores de tela), o que será que vai acontecer quando o Leitor de Tela falar para o Usuário que ele está em um link, aí ele clica e dá um Alerta... É algo sem sentido semântico.


Problemas de SEO (atualização em 07/01/2020)

Apesar de no exemplo da pergunta o script estar no href, apenas estou reiterando que mesmo se usar a tag sem o href também causaria problemas, principalmente relacionados a rastreabilidade dos motores de busca, afetando diretamente o seu SEO. Veja que isso é errado e não deve ser usado <a onclick="goto('https://example.com')">

Veja que o report do Lighthouse acura problema em um <a> sem href

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Fonte: https://developers.google.com/search/docs/advanced/guidelines/links-crawlable?visit_id=637456205254179997-1941812978&rd=1

2
  • Sim! é justamente este caso da minha pergunta. O que eu queria saber é porque os scripts podem ser executados nos links deve haver algum motivo se não o criadouro nem tinha implementado isso. Commented 12/09/2020 às 13:57
  • @felipecardozo a grosso modo não é pq vc pode que vc deve. Funcionar funciona, mas não é o ideal pelos motivos descritos na resposta
    – hugocsl
    Commented 12/09/2020 às 21:26
0

Entendo sua dúvida, mas acredito que essa seja uma das muitas soluções que já foram muito populares em anos atrás e que estão sendo descontinuadas. Não se recomenda o uso do método alert() a não ser que seja para validações de formulários ou bloqueio de ações do browser. Em todo caso, tem-se como um consenso de boa prática o uso do Document Object Model (DOM) para exibição em documento HTML.

const showAlert = document.getElementById("showTheAlert");

showAlert.onclick = function() {

  alert("Alert com DOM!!!");
}
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <input id="showTheAlert" type="button" value="Display alert box">

  <script src="main.js"></script>
</body>

</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .