[Aula 31] O texto está dentro do input

anarsantos commented 6 months ago

Seu Fernando, o texto está aparecendo dentro do input, quando deveria estar fora no vídeo 187.

Captura de tela 2023-12-19 112706

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS</title>
    <style>
        textarea {
            display: block;
            margin-bottom: 10px;
        }
        form, 
        div {
            float: left;
            width: 50%;
            margin: 0;
        }
    </style>
</head>

<body>
    <form action="/" method="get" data-js="form">
        <textarea data-js="textarea" rows="10" cols="50"></textarea>
        <button type="submit" data-js="button">Enviar</button>
    </form>

    <div class="main" data-js="main"></div>

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

</html>

(function () {
    'use strict';

    var $div = document.querySelector('[data-js="main"]');
    var $textarea = document.querySelector('[data-js="textarea"]');
    var $form = document.querySelector('[data-js="form"]');

    $form.addEventListener('submit', function(e) {
        e.preventDefault(); 
        $div.innerHTML = $textarea.value;
    }, false);         
})();

@fdaciuk

fdaciuk commented 6 months ago

Oi @anarsantos! O que aconteceu, na verdade, é que a div ficou por cima do textarea =) Você pode ajustar o tamanho do textarea definindo um width: 90%, por exemplo, pra ele respeitar a largura do formulário, e a div não aparecer por cima dele =)

anarsantos commented 6 months ago

Ok senhor :)

anarsantos commented 6 months ago

Fernando não entendi muito bem essa aula 187. Não consegui entender os problemas de segurança.

fdaciuk commented 6 months ago

Qual parte especificamente você não entendeu? Assim eu consigo te explicar de forma mais precisa =)

anarsantos commented 6 months ago

Na verdade não entendi o problema de segurança. Você colocou as tags dentro do input, fiquei confusa.

fdaciuk commented 6 months ago

Ah, você está falando da parte onde eu mostrei que é possível adicionar tags dentro do textarea, certo? Se for isso, o que acontece é o seguinte: normalmente um formulário envia informações para uma API, e essa API pega esses dados para fazer alguma coisa. O mais comum é tratar os dados e salvar em um banco de dados para uso posterior, onde outra parte do frontend vai chamar essa API para consumir os dados salvos.

Só pra exemplificar, lembra do desafio da API de CEP? Você consultou uma API passando uma informação (CEP), e essa API retornou os dados do endereço desse CEP, certo?

Essas informações de CEP e endereço estão salvas em um banco de dados. Quando você consultou, você recebeu como resposta uma string em JSON, que pode ser convertida para um objeto do JavaScript.

Como você recebeu uma string, concorda que poderia vir qualquer coisa nessa string? Imagine que, ao invés de um JSON, seu frontend espera que a resposta seja um trecho de HTML que você vai exibir de forma dinâmica.

Esse trecho de HTML pode ser literalmente qualquer código HTML válido, incluindo scripts!

Então, se você tem um formulário com um textarea que manda os dados desse textarea para uma API salvar o que foi enviado ali, e você espera que o usuário digite um texto que depois será adicionado no frontend com .innerHTML, mas a pessoa manda um HTML contendo um script com código malicioso, ao usar o .innerHTML você vai simplesmente executar o código que veio da API, do jeito que ele veio.

Esse é o ponto onde podem ocorrer problemas de segurança: o script pode tentar roubar dados que estão salvos no navegador e enviar para alguém via chamada HTTP (XmlHttpRequest, por exemplo).

Por isso é importante sempre tratar os dados vindos de uma API ao invés de só pegar eles e jogar diretamente no DOM usando .innerHTML.

Eu meio que comentei isso mais pra você saber que pode acontecer um problema, não é algo que você precisa se preocupar agora, mas é importante saber que isso pode acontecer.

Existem algumas bibliotecas que ajudam a "limpar" o HTML vindo de uma resposta de um request, removendo scripts e códigos que podem ser perigosos. Mas não precisa ser uma preocupação pra você nesse momento, foi só pra você saber o que pode acontecer, e quando for a hora certa, você ter a possibilidade de atuar para resolver o problema, seja em um projeto pessoal, ou trabalhando dentro de uma empresa, sempre vai ter alguém com uma senioridade mais alta pra ajudar a atacar esse tipo de problema =)

anarsantos commented 6 months ago

Brigadão, seu Fernando! :) Se eu falar que entendi tudo o que você explicou, estou mentido, mas tenho certeza que no futuro vou ler isso e achar a coisa mais simples do mundo rs. Só sei que é importante tratar os dados vindos de uma API. rs

fdaciuk commented 6 months ago

Só sei que é importante tratar os dados vindos de uma API.

Pegou a essência, tá perfeito =)

anarsantos commented 6 months ago

rsrs se peguei a essência tá ótimo ;)

da2k / curso-javascript-ninja

[Aula 31] O texto está dentro do input #10243