Como Detectar Informações do Navegador via JavaScript

Olá Pessoal. Esta é a dica que cria o código daquele quadradinho ali, à direita, na parte de baixo da coluna. Note que ele informa um monte de coisas sobre seu sistema e seu navegador... isto não é invasão de privacidade, nem nenhum código malicioso, mas sim o acesso ao objeto navigator do JavaScript, que permite recuperar várias informações de seu navegador e de seu sistema. Basicamente, é através de acessos a objetos como este que as ferramentas de estatísticas dos portais que você acessa (como o Google Analytics, o Source Forge, etc.) fazem as estatísticas de seu acesso.
Vamos entender este código. Primeiramente, é preciso que se crie a estrutura em HTML onde as informações vão aparecer. Veja que somente criei campos vazios, identificados com IDs, para que possam ser populados dinamicamente, via JavaScript. (No exemplo, troquei as tags para que começassem e terminassem com colchetes, já que o blog não suporta impressão de sinais de maior e menor).

[div id="navegador"]
[p align="center"][b]Configuração do Seu Navegador:[/b][/p]
[p]
[b]Código do Navegador:[/b] [span id="appCode"][/span][br/]
[b]Nome do Navegador:[/b] [span id="appName"][/span][br/]
[b]Versão do Navegador:[/b] [span id="appVersion"][/span][br/]
[b]Cookies Habilitado?[/b] [span id="cookieEnabled"][/span][br/]
[b]Linguagem:[/b] [span id="language"][/span][br/]
[b]Linguagem do Sistema:[/b] [span id="systemLanguage"][/span][br/]
[b]Linguagem do Usuário:[/b] [span id="userLanguage"][/span][br/]
[b]User Agent:[/b] [span id="userAgent"][/span][br/]
[b]Plataforma:[/b] [span id="platform"][/span][br/]
[input type="button" value="Tipos MIME" onclick="getMime();"/]
[input type="button" value="Plugins" onclick="getPlugin();"/][br/]
[/p]
[/div]
[script type="text/javascript"]
populateBrownserInfo();
[/script]

Observe que neste mesmo código já coloquei as chamadas às funções que vão popular a tela. Apenas nos últimos campos (tipos MIME e Plugins) eu não deixei espaço, mas sim um botão. Fiz isso para não poluir a tela. Como estas opções costumam gerar grande quantidade de caracteres em suas saídas, eu as deleguei para uma janela POP-UP. Se seu navegador não bloquear POP-UPs, então elas vão aparecer preenchidas com as informações tão logo os respectivos botões sejam acionados.
Vamos às funções:

function populateBrownserInfo() {
var appCode = document.getElementById("appCode");
var appName = document.getElementById("appName");
var appVersion = document.getElementById("appVersion");
var cookieEnabled = document.getElementById("cookieEnabled");
var language = document.getElementById("language");
var systemLanguage = document.getElementById("systemLanguage");
var userAgent = document.getElementById("userAgent");
var userLanguage = document.getElementById("userLanguage");
var platform = document.getElementById("platform");

// Imprimindo os valores
if(appCode != null) {
appCode.innerHTML = navigator.appCodeName;
}
if(appName != null) {
appName.innerHTML = navigator.appName;
}
if(appVersion != null) {
appVersion.innerHTML = navigator.appVersion;
}
if(appVersion != null) {
if (navigator.cookieEnabled) {
cookieEnabled.innerHTML = "Claro, xará!!";
} else {
cookieEnabled.innerHTML = "Meu Deus, não!";
}
}
if(language != null) {
if (navigator.language == null) {
language.innerHTML = "Não Sei!!";
} else {
language.innerHTML = navigator.language;
}
}
if(systemLanguage != null) {
if (navigator.systemLanguage == null) {
systemLanguage.innerHTML = "Não Sei!!";
} else {
systemLanguage.innerHTML = navigator.systemLanguage;
}
}
if(userLanguage != null) {
if (navigator.userLanguage == null) {
userLanguage.innerHTML = "Não Sei!!";
} else {
userLanguage.innerHTML = navigator.userLanguage;
}
}
if(userAgent != null) {
userAgent.innerHTML = navigator.userAgent;
}
if(platform != null) {
if(navigator.platform == null) {
platform.innerHTML = "Não Sei!!";
} else {
platform.innerHTML = navigator.platform;
}
}
}

Uma maneira de popular dados em uma tag span é utilizar a sua propriedade span.innerHTML, recuperando o que há nela ou reescrevendo o seu conteúdo. A lista de propriedades do navegador recuperada via código é:

navigator.appCodeName = Um nome em código para o navegador.
navigator.appName = O nome "real" do navegador.
navigator.appVersion = Versão do navegador e demais informações correlatas.
navigator.cookieEnabled = Boolean. Indica se os cookies estão ou não habilitados.
navigator.language = Língua padrão do navegador (só existe no Netscape e Firefox).
navigator.systemLanguage = Linguagem do sistema operacional (só existe no IE).
navigator.userLanguage = A linguagem selecionada pelo usuário (só existe no IE).
navigator.userAgent = Um cabeçalho indicando o user agent.
navigator.platform = A plataforma do sistema operacional.

Existem ainda outras propriedades do objeto navigator, muitas pouco comuns ou úteis. As seguintes, todavia, talvez tenham boa aplicação:

function getMime() {
var mimes = "";
if(navigator.mimeTypes == null) {
mimes = "Não Sei!!";
} else {
var types = navigator.mimeTypes;
mimes = types[0].type;
for (i = 1; i < types.length; i++) {
mimes = mimes + ", " + types[i].type;
}
}
var mimeWindow =
window.open("", "MIMEs", "menubar=no,location=no,status=no,scrollbars=yes");
mimeWindow.document.body.innerHTML = mimes;
}

function getPlugin() {
var plugins = "";
if(navigator.plugins == null) {
plugins = "Não Sei!!";
} else {
var pluginsArray = navigator.plugins;
plugins = pluginsArray[0].name + " (arquivo: " + pluginsArray[0].filename
+ ", descrição: " + pluginsArray[0].description + ")";
for (i = 1; i < pluginsArray.length; i++) {
plugins = plugins + ", " + pluginsArray[i].name + " (arquivo: " +
pluginsArray[i].filename + ", descrição: " + pluginsArray[i].description + ")";
}
}
var pluginWindow =
window.open("", "Plugins", "menubar=no,location=no,status=no,scrollbars=yes");
pluginWindow.document.body.innerHTML = plugins;
}

navigator.mimeTypes = Uma lista com todos os tipos MIME suportados pelo navegador (Somente Netscape e Firefox).
navigator.plugins = Uma lista em HTML de todos os plugins instalados no navegador (Somente Netscape e Firefox). Observe que esta lista é em HTML, ou seja, pode conter links, quebra de linhas, etc.
Por serem longas e/ou formatadas, estas opções abrirão em nova janela.
A nova janela é criada com a função window.open. Esta função retorna uma referência para a janela recém-criada e, com isto, podemos popular todo o seu código HTML dinamicamente!! Basta acessar:

var novaJanela = window.open("", "Plugins", "menubar=no");

Observe que deixamos vazio o lugar onde seria colocado o arquivo HTML da janela. No entanto, este arquivo é criado na memória com apenas a estrutura DOM básica. É o suficiente para injetarmos conteúdos nele, recuperando o seu objeto document, de onde podemos recuperar o objeto body e toda a estrutura DOM da página da janela:

var conteudo = [obtém todo o conteúdo da janela no formato de String];
novaJanela.document.body.innerHTML = conteudo;

Pessoal, espero ter ajudado!! Claro, como não custa nada: COMEEEEENNTEEEEMMM!!!!!